大きさの異なる要素を隙間なく配置する（HTML/CSS）

2022.10.3公開（2022.10.3更新）
@HTMLコーディング
#配置

前書き

CSSのグリッドレイアウトで、大きさの異なる要素を隙間なく配置する方法を掲載しています。

画像を隙間なく配置する

グリッドで12列作る

grid-template-columns: repeat(12, 1fr);

隙間を埋める

grid-auto-flow: row dense;

セルをいくつ跨いで占有するか決める

grid-column-end: span 〇; grid-row-end: span 〇;

画像の大きさを縦横いっぱいに広げる

object-fit: cover;

調整（並び替え等）

無料写真素材なら【写真AC】


<div class="wrap">
  <div class="item item-c12r1 item-c6r2-md"><img class="item-img" src="星.webp" ></div>
  <div class="item item-c6r1  item-c3r1-md"><img class="item-img" src="桜.webp" ></div>
  <div class="item item-c6r2  item-c3r2-md"><img class="item-img" src="羊蹄山.webp" ></div>
  <div class="item item-c6r1  item-c3r1-md"><img class="item-img" src="傘.webp" ></div>
  <div class="item item-c6r2  item-c3r2-md"><img class="item-img" src="熊野本宮大社.webp" ></div>
  <div class="item item-c6r1  item-c3r1-md"><img class="item-img" src="すすき.webp" ></div>
  <div class="item item-c12r1 item-c6r2-md"><img class="item-img" src="コスモス.webp" ></div>
  <div class="item item-c6r1  item-c3r1-md"><img class="item-img" src="月と海.webp" ></div>
</div>


.wrap{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row dense;
  gap: 10px 10px;
}
.item-img{
  width: 100%; height: 100%; object-fit: cover;
}
@for $i from 1 through 12 {
  @for $j from 1 through 2 {
    .item-c#{$i}r#{$j} {
      grid-column-end: span $i; grid-row-end: span $j;
    }
  }
}
@media screen and (min-width: 768px){
  @for $i from 1 through 12 {
    @for $j from 1 through 2 {
      .item-c#{$i}r#{$j}-md {
        grid-column-end: span $i; grid-row-end: span $j;
      }
    }
  }
}
//コンパイル後↓
// .item-c1r1  { grid-column-end: span 1; grid-row-end: span 1; }
//  中略
// .item-c12r2 { grid-column-end: span 12; grid-row-end: span 2; }
// @media screen and (min-width: 768px){
//   .item-c1r1-md  { grid-column-end: span 1; grid-row-end: span 1; }
//    中略
//   .item-c12r2-md { grid-column-end: span 12; grid-row-end: span 2; }
// }