グリッドレイアウトでグリッドを枠の幅に応じて折り返す

概要

グリッドレイアウトでグリッドを枠の幅に応じて折り返す場合には、grid-template-columns プロパティに repeat を設定します。

書式

grid-template-columns: repeat(auto-fit, [グリッドの幅])

grid-template-columns: repeat(auto-fit, minmax([グリッドの最小幅],1fr))

grid-template-columns: repeat(auto-fill, [グリッドの幅])

grid-template-columns: repeat(auto-fill, minmax([グリッドの最小幅],1fr))

実装例

以下のHTMLファイル、CSSファイルを作成します。

GridWrap.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="GridWrap.css" />
</head>
<body>
  <h1>グリッドレイアウトでの折り返し</h1>

  <div class="ContentsFrame">
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ1です。</div>
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ2です。</div>
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ3です。</div>
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ4です。</div>
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ5です。</div>
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ6です。</div>
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ7です。</div>
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ8です。</div>
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ9です。</div>
    <div class="Content"><div><img class="TileIcon" src="kamoru.svg"></div>コンテンツ10です。</div>
  </div>

</body>
</html>

GridWrap.css

.ContentsFrame {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.Content {
  padding:1rem 1rem 1rem 1rem;
  text-align:center;
  background-color:#ffef97;
}

.TileIcon {
  width:4rem;
}

解説

display: grid; を設定しグリッドレイアウトを指定します。
gapプロパティでグリッド間の余白を設定します。グリッドの折り返しは、grid-template-columns プロパティで設定します。以下のコードでは、内部のグリッドの最小幅を240ピクセルとして、あふれたグリッドを折り返す動作になります。

.ContentsFrame {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

以下は内部のタイルのスタイルです。paddingを設定し、background-colorプロパティで黄色の背景色を設定しています。

.Content {
  padding:1rem 1rem 1rem 1rem;
  text-align:center;
  background-color:#ffef97;
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
グリッドレイアウトでグリッドを枠の幅に応じて折り返す:画像1

ウィンドウ幅を狭めると、枠の内部のタイルが折り返される動作になります。タイルの幅は枠の幅に合わせて変化しますが、240ピクセル以下にはならず折り返されます。
グリッドレイアウトでグリッドを枠の幅に応じて折り返す:画像2
グリッドレイアウトでグリッドを枠の幅に応じて折り返す:画像3

実装例2

minmax関数を利用しない場合の動作も確認します。CSSを以下のコードに変更します。

GridWrap.css

.ContentsFrame {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, 240px);
}

.Content {
  padding:1rem 1rem 1rem 1rem;
  text-align:center;
  background-color:#ffef97;
}

.TileIcon {
  width:4rem;
}

解説

以下の設定でグリッドレイアウト内の Contentクラスの枠は折り返されますが、横幅は240ピクセルで固定の表示となります。

grid-template-columns: repeat(auto-fit, 240px)

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。枠内のタイルの横幅は240ピクセル固定のため、右側に余白があります。
グリッドレイアウトでグリッドを枠の幅に応じて折り返す:画像4

ウィンドウの幅を狭めます。
グリッドレイアウトでグリッドを枠の幅に応じて折り返す:画像5

タイルが枠に入らない状況になると、タイルが折り返され3行の表示になります。タイルの横幅は固定のため、右側に余白ができます。
グリッドレイアウトでグリッドを枠の幅に応じて折り返す:画像6

さらに横幅を狭めると、折り返され4行表示になります。
グリッドレイアウトでグリッドを枠の幅に応じて折り返す:画像7