[HTML]
<style>
div.crawlimage01 {
padding-block: 30px;
> div {
display: grid;
grid-template-columns: repeat(5,30vw);
column-gap: 10px;
@media (width < 900px) {
grid-template-columns: repeat(5,60vw);
}
> img {
width: 100%;
}
}
}
div.crawlimage02 {
padding-block: 30px;
> div {
display: grid;
grid-template-columns: repeat(10,30vw);
column-gap: 10px;
@media (width < 900px) {
grid-template-columns: repeat(10,60vw);
}
> img {
width: 100%;
}
}
}
div.crawlimage03 {
padding-block: 30px;
> div {
display: grid;
grid-template-columns: repeat(10,20vw);
column-gap: 10px;
@media (width < 900px) {
grid-template-columns: repeat(10,40vw);
}
> img {
width: 100%;
}
}
}
</style>
<div class="crawlimage01">
<div>
<img src="./image/crawl01.webp">
<img src="./image/crawl02.webp">
<img src="./image/crawl03.webp">
<img src="./image/crawl04.webp">
<img src="./image/crawl05.webp">
</div>
</div>
<div class="crawlimage02">
<div>
<img src="./image/crawl01.webp">
<img src="./image/crawl02.webp">
<img src="./image/crawl03.webp">
<img src="./image/crawl04.webp">
<img src="./image/crawl05.webp">
<img src="./image/crawl01.webp">
<img src="./image/crawl02.webp">
<img src="./image/crawl03.webp">
<img src="./image/crawl04.webp">
<img src="./image/crawl05.webp">
</div>
</div>
<div class="crawlimage03">
<div>
<img src="./image/crawl01.webp">
<img src="./image/crawl02.webp">
<img src="./image/crawl03.webp">
<img src="./image/crawl04.webp">
<img src="./image/crawl05.webp">
<img src="./image/crawl01.webp">
<img src="./image/crawl02.webp">
<img src="./image/crawl03.webp">
<img src="./image/crawl04.webp">
<img src="./image/crawl05.webp">
</div>
</div>
<script defer src="./js/crawlimage.js"></script>