gridの使い方まとめ

CSS Gridの基本的な使い方

CSS Gridは、要素を縦横のマス目に沿って配置するためのレイアウト機能です。 親要素にdisplay: grid;を指定し、その中の子要素を列や行に並べます。

基本形

<div class="grid">
  <div>項目1</div>
  <div>項目2</div>
  <div>項目3</div>
  <div>項目4</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

この指定では、子要素が同じ幅の2列に並びます。

プロパティ	役割
display: grid;	グリッドレイアウトを有効にする
grid-template-columns	列の数や幅を指定する
gap	行と列の間隔を指定する
fr	利用できるスペースを割合で分配する

frによる幅の指定

frは、親要素の中で利用できるスペースを分配する単位です。

grid-template-columns: 1fr 1fr;

左右を同じ幅にします。

grid-template-columns: 1fr 2fr;

左を1、右を2の割合にします。右側は左側の約2倍の幅になります。

repeat()による繰り返し指定

repeat()は、同じ列幅の指定を繰り返すための関数です。

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

これは、次の指定と同じ意味です。

grid-template-columns: 1fr 1fr 1fr;

つまり、同じ幅の列を3つ作ります。

基本構文

repeat(繰り返す回数, 列幅)

使用例

/* 同じ幅の3列 */
grid-template-columns: repeat(3, 1fr);

/* 200px幅の4列 */
grid-template-columns: repeat(4, 200px);

/* 100pxと1frの組み合わせを2回繰り返す */
grid-template-columns: repeat(2, 100px 1fr);

最後の指定は、次の4列を作ります。

100px 1fr 100px 1fr

repeat()の前後に別の列を置く

grid-template-columns: 200px repeat(3, 1fr) 100px;

次の5列が作られます。

200px | 1fr | 1fr | 1fr | 100px

サイドバーとメイン領域

<div class="layout">
  <aside>サイドバー</aside>
  <main>メインコンテンツ</main>
</div>

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
}

左側を固定の240px、右側を残りの幅にできます。

レスポンシブなカード一覧

.card-list {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(250px, 1fr)
  );
  gap: 20px;
}

この指定では、次のような挙動になります。

• 各カードの最小幅は250px
• 横幅に余裕があれば列数が増える
• 画面が狭くなると自動的に折り返す
• 余ったスペースは各列に均等に分配される

カード一覧や商品一覧などでよく使われる指定です。

auto-fitとauto-fillの違い

auto-fit

grid-template-columns:
  repeat(auto-fit, minmax(250px, 1fr));

要素が少ない場合、使われていない空の列をつぶし、 実際に存在する要素を横に広げます。

auto-fill

grid-template-columns:
  repeat(auto-fill, minmax(250px, 1fr));

要素が少ない場合でも、入る予定だった空の列を残します。

特定の要素を複数列に広げる

.featured {
  grid-column: span 2;
}

<div class="grid">
  <div class="featured">横2列分を使用</div>
  <div>通常の要素</div>
  <div>通常の要素</div>
</div>

grid-column: span 2;を指定した要素は、横方向に2列分の幅を使用します。

よく使う指定まとめ

/* 均等な2列 */
grid-template-columns: repeat(2, 1fr);

/* 均等な3列 */
grid-template-columns: repeat(3, 1fr);

/* 左を固定幅、右を残り幅 */
grid-template-columns: 240px 1fr;

/* 左右を1対2の割合にする */
grid-template-columns: 1fr 2fr;

/* レスポンシブなカード一覧 */
grid-template-columns:
  repeat(auto-fit, minmax(250px, 1fr));

/* 要素を横2列分に広げる */
grid-column: span 2;

GridとFlexboxの使い分け

機能	向いている用途
CSS Grid	ページ全体、カード一覧、縦横を意識したレイアウト
Flexbox	ナビゲーション、ボタン、横並びなど一方向の配置