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

前書き

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

目次

1. 画像を隙間なく配置する
2. どのように整列するか試す
3. 参考

画像を隙間なく配置する

無料写真素材なら【写真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; }
// }

どのように整列するか試す

参考

CSS Grid Layout を極める！（基礎編）

【CSS】grid-auto-flowの使い方、アイテムの配置方向を指定する!

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

関連記事

フォトギャラリーを作る（HTML/CSS/JS）

画面全体に表示するメニューを作る（HTML/CSS/JS）

開閉するボックスを作る（HTML/CSS/JS）

CSSを使って自動で番号を振る

WEBページの部品作り