Gridの便利な使い方3選

HTML,CSS

Last updated at 2022-12-08Posted at 2022-12-08

はじめに

こんにちは！
突然ですがみなさんgrid使っていますか？
flexで作れる、何が便利かわからない、という方も多いかと思います。
そこで今回はgridでできる便利なことを紹介してみたいと思います。

一番メジャーな使い方は親要素にdisplay: gridを指定してアイテムの繰り返し。

.grid{
  display: grid;
  gap: 20px 16px;
  grid-template-columns: repeat(3, 1fr);
}

See the Pen ２行で書ける中央揃えa by river (@river_ant) on CodePen.

もう少し応用としてrepeatにauto-fit, minmax(100px, 1fr)を使う方法も有名ですね。
実際に画面幅を変えていただくとわかりやすいかと思いますがauto-fit, minmax(100px, 1fr)を指定することで最低値が100pxになりアイテムが100px以下になると自動でアイテムを下に移動してくれます。
メディアクエリで調節する必要がなくなるので便利です。

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

See the Pen メジャー by river (@river_ant) on CodePen.

それでは他にどんな便利な使い方があるのか紹介していきたいと思います。

その１　２行で書ける中央揃え

親要素にplace-items: center;とdisplay: grid;を指定することで簡単に子要素を上下左右中央寄せにできます。

.parent {
 display: grid;
 place-items: center; 
}

See the Pen Untitled by river (@river_ant) on CodePen.

その2　スマホ時レイアウトが変わる時に柔軟に対応できる

例えばこんな感じのコンテンツがあった時。スマホでアイコンを左にタイトルとテキストを右に持っていきたいとします。

See the Pen auto-fit by river (@river_ant) on CodePen.

flexだとdisplay:contentsでスタイルを調整したり、DOM構造を変えなきゃいけなかったりでめんどうですがgridなら

See the Pen スマホ時レイアウトが変わる時に柔軟に対応できる（PC） by river (@river_ant) on CodePen.

親要素にdisplay: grid;grid-template-rows: auto auto; grid-template-columns: 120px auto; align-items: center;を移動させたいアイコン要素にgrid-row: 1/3; grid-column: 1/2;を指定してあげるだけであとはマージン等調整すればDOMをいじらず簡単にできちゃいます。

その3　absoluteを使わずに要素を重ねる

カードの上にテキストを配置したい時大体absoluteで絶対配置すると思いますが実はgridでもできます。
グリッドアイテムをgrid-area: 1/-1;にしてエリア全体を指定。
あとはテキストをflexで下寄せにすれば完成。absoluteを使うことなく要素を重ねることができました。
ちなみにgrid-itemはpositionを指定しなくてもz-indexが効くので重なり順も自由に変えることもできます。

See the Pen スマホ時レイアウトが変わる時に柔軟に対応できる（SP） by river (@river_ant) on CodePen.

最後に

いかかでしたでしょうか！
他にもgap（flexでもできますが）で空きを調節したり、grid-auto-flowで並び順を変えたり、grid-template-areasでグリッドレイアウトのエリアを指定したり、
positionを使わずz-indexで重なり順を調節したり（以下サンプル）...etc

See the Pen grid z-index by river (@river_ant) on CodePen.

flexと似ていますが双方でできることとできないことがあるのでレイアウトによって使い分けられるといいですね。
flexと同じくアイテムには***-content,***-items,***-selfも使えるので覚えておいて損はないと思います！