CSS Grid Layoutを使ったレスポンシブ対応のタイルレイアウト

backham

2025-06-12

一定の幅と高さのボックスを繰り返し表示するタイルレイアウトをレスポンシブ対応にするため、CSS Grid Layout について調べてみました。

CSS Grid Layout（グリッドレイアウト）とは

CSS を用いて 2 次元のレイアウトを構築するための機能です。格子状のマス目（グリッド）に要素を配置したり、結合したりすることで、様々なレイアウトが可能になります。

Flexbox は 1 次元（横または縦）のレイアウトに適しているのに対し、グリッドレイアウトは 2 次元のレイアウトに適しています。

特徴	Flexbox	Grid Layout
レイアウトの次元	1 次元（横または縦）	2 次元（横と縦）
イメージ

グリッドレイアウトを理解するための基本的な概念・用語

グリッドレイアウトは以下の要素で構成されています。 Excel やスプレッドシートをイメージすると分かりやすいと思います。

1. グリッドコンテナ

Excel で例えると、シート全体。表の外枠の部分

CSS でdisplay: grid; または display: inline-grid; を指定することで、グリッドコンテナになります。
グリッドコンテナ直下の子要素はグリッドアイテムになります。

2. グリッドアイテム

各セルに入力されている「値や内容」

グリッドコンテナ直下の子要素

3. グリッドライン

セルを区切る境界線

1 本目から順番に自動的に番号がふられています。
CSS では grid-column-start と grid-column-end を使用してグリッドアイテムが列の何本目から何本目のグリッドラインまで配置するか指定できます。

grid-column-start と grid-column-endの使用イメージ・例

/* グリッドアイテム */
.item {
  /* 列の配置：1本目から3本目のグリッドラインまで */
  grid-column-start: 1;
  grid-column-end: 3;
}

4. グリッドトラック

行（row）や列（column）

列（grid column） = Excel の A 列, B 列など
行（grid row） = Excel の 1 行目, 2 行目など
グリッドライン間に挟まれた帯状の領域

5. セル

1 つのマス（セル）

Excel の「A1」や「B3」といった、行と列の交差点にできる 1 つのマス目
グリッドアイテムを配置する最小の単位

6. エリア

セルを結合した領域（複数セルを選択した範囲）

Excel で A1〜C2 までの 6 セルを選んで結合したような、複数のセルにまたがるエリアを指定できます

タイル状のレイアウトを Grid Layout で作ってみる

今回は 8 枚のタイルを 2 行 4 列に並べてみます。

目指すレイアウトのイメージはこちらの画像のような感じです。

HTML は以下のような構造にしました。

グリッドコンテナになる要素にクラス名 .container、グリッドアイテムになる要素にクラス名 .itemを付けています。

<!-- グリッドコンテナ -->
<div class="container">
  <!-- グリッドアイテム1 -->
  <div class="item">
    <div class="thumbnail"></div>
    <div class="content">
      <div class="title">記事タイトルがここに入ります</div>
      <div class="date">2025年6月12日</div>
    </div>
  </div>

  <!-- グリッドアイテム2〜8はグリッドアイテム1の繰り返しです。 -->
</div>

まずは CSS で 4 列のレイアウトにしてみます。必要な設定は以下の 2 つです。

グリッドコンテナの定義： display: grid;
列の数と幅の指定： grid-template-columns

グリッドコンテナになる .container に設定します。

/* グリッドコンテナ */
.container {
  display: grid; /* グリッドコンテナの定義 */
  grid-template-columns: repeat(4, 1fr); /* 列の数と幅の指定 */
  gap: 1rem;
}

`grid-template-columns` についての補足

grid-template-columns は列の数と幅を定義できます。各列の幅を個別に設定することも、repeat(繰り返し回数, 各列の幅)を使用して全ての列に均一の幅を設定することもできます。

fr 単位について

fr は “fraction（フラクション）” の略で、「残りのスペースを ○ 等分する」という意味です。今回の grid-template-columns: repeat(4, 1fr); の場合は使える横幅を 4 等分して、各列が同じ幅になります。画面幅が変われば、各列の幅も自動で変化します。

grid-template-columns の使用イメージ：

タイル状のレイアウトをレスポンシブ対応する

画面の幅が小さくなった場合もレイアウトが崩れないようにします。

今回対応したのは以下の 3 つのポイントです。

タイル（グリッドアイテム）の縦横比固定
タイトルは最大 2 行表示に制限
特定の幅より小さくなったら 2 列表示に切り替える

タイル（グリッドアイテム）の縦横比固定

画面の幅を縮めていった際にタイル（グリッドアイテム）の幅が細くなりすぎて潰れてしまうのを防ぐため、タイルの縦横比を固定します。

/* グリッドアイテム */
.item {
  aspect-ratio: 4 / 5; /* タイルの比率を4:5に固定 */

  /* その他のプロパティは省略しています。 */
}

タイトルは最大 2 行表示に制限

タイトルの文字列も溢れないように 2 行を超える場合は隠すようにします。

.title {
  /* タイトルは最大2行表示。2行を超える場合は文字列を省略。 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* 2行で切る */
  -webkit-box-orient: vertical;
  max-height: calc(1.4em * 2); /* 2行分の高さに制限 */

  /* その他のプロパティは省略しています。 */
}

特定の幅より小さくなったら 2 列表示に切り替える

メディアクエリを使用し、画面幅が 768px 未満の場合は 2 列表示に切り替えるようにしました。

スマホサイズでの 2 列表示のイメージ

/* スマホ表示：画面幅が768px未満なら2列に */
@media (max-width: 767px) {
  /* グリッドコンテナ */
  .container {
    grid-template-columns: repeat(2, 1fr); /* 2列表示 */
  }
}

今回の記事ではグリッドレイアウトに関する部分のみピックアップして説明していますが、下記のサンプルの CodePen では文字のサイズも画面幅に応じて可変にするなどの調整も行っています。グリッドレイアウトの話題とは別になるので今回はそちらの部分の説明については省いていますが、何か参考になればと思います。画面幅に応じて変化する文字サイズについてはまた別の記事で紹介できたらと思います。

サンプル

画面の幅を広げたり縮めたりするとタイルの並び方、文字サイズが変わります。

CSS Grid Layout（グリッドレイアウト） とは