グリッドの基本

grid-template-columns: repeat(3, 1fr) と一行書くだけで等しい幅の列が三つでき、ブラウザーは子要素を一つずつ次のあいているセルに置いていきます。

行と列を同時に

グリッド（CSS Grid Layout モジュール）は、行と列をいっしょに扱う二次元のレイアウトのために作られています。入れ物の上にグリッドを描くと、アイテムがそのセルにおさまります。フレックスボックスがアイテムから出発してアイテムに大きさを決めさせるのに対し、グリッドはレイアウトから出発してアイテムをそこにはめこみます。そのため、写真ギャラリー、カードの一覧、そしてヘッダー、サイドバー、メインの内容、フッターからなるページ全体の形を作るのにぴったりです。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

トラックと fr 単位

grid-template-columns には、トラックと呼ばれる各列の幅を並べて書きます。200px 1fr のようにどんな長さでも使えますが、グリッドには独自の単位 fr（あいている場所の割合）もあります。1fr 1fr 1fr は等しい幅の列を三つ作り、2fr 1fr は 1 列めを 2 列めの 2 倍の幅にします。fr 単位が分けるのは、固定幅のトラックとすき間を引いて残った場所だけです。そのため 200px 1fr とすると、200 ピクセルのサイドバーができ、残りをメインの列がとります。repeat(3, 1fr) は 1fr 1fr 1fr を短く書く方法です。grid-template-rows は行について同じことをしますが、行は指定せずに内容の高さに任せることもよくあります。

アイテムを配置する

既定では、アイテムはソースの順に、一つのセルに一つずつ、左から右へ、そして次の行へとグリッドをうめていきます。アイテムを大きくするには、grid-column: span 2 で 2 列に、grid-row: span 2 で 2 行にまたがらせます。トラックのあいだの線には 1 から番号がついているので、3 列のグリッドには線 1 から 4 があり、grid-column: 1 / 3 は線 1 から線 3 までという意味です。負の数は最後から数えるので、grid-column: 1 / -1 はアイテムを横幅いっぱいに広げます。

エリアに名前をつける

ページのレイアウトでは、grid-template-areas を使うと、レイアウトを言葉で描けます。引用符で囲んだ文字列一つが一つの行、単語一つが一つのセルです。同じ単語をくり返すと、そのエリアがそれらのセルにまたがります。そして各アイテムに、対応する名前の grid-area を指定します。下のレイアウトはほとんどスケッチのように読めます。上いっぱいにヘッダー、サイドバーとメインの内容が横に並び、いちばん下にフッターです。スマートフォン用にレイアウトを変えるには、多くの場合メディアクエリの中で、この数行の文字列を書きかえるだけですみます。

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

画面に合わせた列

MDN のグリッドの解説にある、おぼえておきたい書き方が一つあります。grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) です。minmax(150px, 1fr) は、各列は少なくとも 150 ピクセルで、場所を分け合ってのびてもよいという意味です。auto-fill は入るだけ列を作ります。こうすると、スマートフォンでは 2 列、広い画面では 5 列や 6 列になるギャラリーができます。これもメディアクエリなしです。フレックスボックスと同じように、グリッドでも HTML と違う順番でアイテムを置けますが、注意点も同じです。読む順番と見た目の順番を同じにしておきましょう。