Tailwind.css で Grid Layout

チートシート

公式 Docs - tailwindcss.com - grid

className	css
.grid	display: grid;
.grid-cols-{n}	grid-template-columns: repeat({n}, minmax(0, 1fr));
.col-span-{n}	grid-column: span {n} / span {n};
.col-start-{n}	grid-column-start: {n};
.col-end-{n}	grid-column-end: {n};
.gap-{n}	gap: {0.25 * n}rem;
.col-gap-{n}	column-gap: {0.25 * n}rem;
.grid-flow-row	grid-auto-flow: row;
.grid-flow-col	grid-auto-flow: column;
.grid-flow-row-dense	grid-auto-flow: row dense;
.grid-flow-col-dense	grid-auto-flow: column dense;

1. flex を置き換える

.flex-rowで横ならびにします。
flexにする場合、width の指定が必要ですので .w-1/5 で五分割しました。

const Flex = () => (
  <div className="h-screen flex flex-wrap flex-row">
    <div className="bg-red-100 w-1/5"></div>
    <div className="bg-red-200 w-1/5"></div>
    <div className="bg-red-300 w-1/5"></div>
    <div className="bg-red-400 w-1/5"></div>
    <div className="bg-red-500 w-1/5"></div>
  </div>
);

この実装に Grid を用いるとこうなります。

.grid-cols-{n} で n 分割された column が生成されます。
小要素のサイズ指定なしでもきれいに五分割されています。

const Grid = () => (
  <div className="h-screen grid grid-cols-5">
    <div className="bg-red-100"></div>
    <div className="bg-red-200"></div>
    <div className="bg-red-300"></div>
    <div className="bg-red-400"></div>
    <div className="bg-red-500"></div>
  </div>
);

Firefox Developer Edition というブラウザを使って、Grid レイアウトを見やすくしています。

2. 横幅を変化させる

{col | row}-span-{n}で n 個分のグリッドを一つの要素に宣言することができます。
grid-cols-{n}の n は横の要素数ではなく、grid の分割数になることに注意しましょう。

const Grid = () => (
  <div className="h-screen grid grid-cols-5">
    <div className="bg-red-100"></div>
    <div className="bg-blue-200 col-span-2"></div> {/* 二列分 */}
    <div className="bg-red-300"></div>
    <div className="bg-red-400"></div>
  </div>
);

3. row と組み合わせる

現状で要素が増えると row は自動的に分割されていきます。

const Grid = () => (
  <div className="h-screen grid grid-cols-5">
    <div className="bg-red-100"></div>
    <div className="bg-blue-200 col-span-2"></div> {/* 二列分 */}
    <div className="bg-red-300"></div>
    <div className="bg-red-400"></div>
    <div className="bg-red-500"></div>
  </div>
);

親要素に .grid-rows-{n}を追加して、row のサイズを調節できます。

const Grid = () => (
  <div className="h-screen grid grid-cols-5 grid-rows-3">
    {/* 一行目 */}
    <div className="bg-red-100"></div>
    <div className="bg-blue-200 col-span-2"></div>
    <div className="bg-red-300"></div>
    <div className="bg-red-400"></div>
    {/* 二行目 */}
    <div className="bg-orange-100"></div>
    <div className="bg-orange-200 row-span-2"></div> {/* 一部を縦長にしてみる */}
    <div className="bg-orange-300"></div>
    <div className="bg-orange-400"></div>
    <div className="bg-orange-500"></div>
  </div>
);

4. 使わない div を消す

上の画像のように左上の<div>と右上の<div>は何も描画しないように実装しようとすると以下のようになると思います。

const Grid = () => (
  <div className="h-screen grid grid-cols-5 grid-rows-3">
    {/* 一行目 */}
    <div className=""></div> {/* 不要 */}
    <div className="bg-blue-200 col-span-2"></div>
    <div className="bg-red-300"></div>
    <div className=""></div> {/* 不要 */}
    {/* 二行目 */}
    <div className="bg-orange-100"></div>
    <div className="bg-orange-200 row-span-2"></div>
    <div className="bg-orange-300"></div>
    <div className="bg-orange-400"></div>
    <div className="bg-orange-500"></div>
  </div>
);

不要と書いた箇所の<div>は必要ないので.col-start-{n}, .col-end-{n}で消すことができます。

const Grid = () => (
  <div className="h-screen grid grid-cols-5 grid-rows-3">
    {/* 一行目 */}
    <div className="bg-blue-200 col-start-2 col-span-2"></div> {/* 二列分 */}
    <div className="bg-red-300 col-end-5"></div>
    {/* 二行目 */}
    <div className="bg-orange-100"></div>
    <div className="bg-orange-200 row-span-2"></div>
    <div className="bg-orange-300"></div>
    <div className="bg-orange-400"></div>
    <div className="bg-orange-500"></div>
  </div>
);

ここで出てきた 2 と 5 という値は Gird の 2 番目から要素が始まって、5 番目で要素の終端を迎えるといった意味になっています。
下の画像の上部に表示されている Grid の番号を見てみるとよくわかると思います。

5. gap

最後に Grid の仕様にある gap を使って余白をとってみます。

const Grid = () => (
  <div className="h-screen grid grid-cols-5 grid-rows-3 gap-4">
    {/* 一行目 */}
    <div className="bg-blue-200 col-start-2 col-span-2"></div> {/* 二列分 */}
    <div className="bg-red-300 col-end-5"></div>
    {/* 二行目 */}
    <div className="bg-orange-100"></div>
    <div className="bg-orange-200 row-span-2"></div>
    <div className="bg-orange-300"></div>
    <div className="bg-orange-400"></div>
    <div className="bg-orange-500"></div>
  </div>
);