本気のCSSグリッドレイアウト

フレックスボックスとの違い
フレックスボックスは、要素を行と列のいずれかの方向にレイアウトしやすいように設計されています。それに対して、グリッドレイアウトは行と列に要素を並べます。フレックスボックスによる1次元のレイアウト手法と比較して、グリッドレイアウトは2次元のレイアウト手法であると考えられます。
https://www.ceroan.co.jp/cho-men/post/new-layout-method-introduction-to-css-grid-layout#:~:text=フレックスボックスと,られます。

非常にわかりやすい

こまきち

グリッドコンテナ内では、縦横のグリッドラインでグリッドを構成します。各行と列をグリッドトラックと呼びます。

知らなかった。。トラックとライン。

こまきち

グリッドアイテムを配置するスペースの最小単位がグリッドセルで、グリッドエリアは1つ以上のグリッドセルから構成されるスペースです。

グリッドアイテムのグリッドセルとグリッドエリア

こまきち

fr単位は、トラックサイズをグリッドコンテナのサイズに対しての比率で指定する単位です。
fr単位初耳…
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#単位_fr

こまきち

minmax()

ほう

.grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 1fr 2fr;
  grid-template-rows: 2fr 1fr;
}

こまきち

repeat()

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 2fr) 1fr;
  grid-template-rows: repeat(2, 100px);
}

paddingじゃなくてrow-gapね

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 1em;
}

こまきち

お、サブグリッドもあるのか

こまきち

ざっくり把握したのでTailwindCSS版を。

こまきち

テーマ化しない場合は、 [] で囲うことで設定できる

Arbitrary values
If you need to use a one-off grid-template-columns value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="grid grid-cols-[200px_minmax(900px,_1fr)_100px]">
  <!-- ... -->
</div>