新しいレイアウト方法。「CSS grid Layout」

新しいレイアウト方法。「CSS grid Layout」

コーディング

レイアウトに使われる、flout や Flexbox。そんな中、新しいレイアウト方法が気になったのでまとめてみました。
その名も「css grid Layout」。まだ対応しているブラウザ少ないのでは？と思ったのですが、そんなこともなさそうです！

目次

grid layout の設定の仕方

レイアウトをしたい要素の親要素(グリッドコンテナ)に下記1文を書くだけ！

とりあえずの準備はこれだけ！

.test{
display: grid;
}

グリッドアイテムが縦に並んでいる状態ですね。まだ見た目は変わりません。ブラウザで見るとこんな感じ。

あとは「test」＝グリッドコンテナ内の列と幅を決めます。

.test{
  display: grid;
  width: 90vw; /*test自体の幅*/
  height: 90vh; /*test自体の高さ*/
  margin: 0 auto; /*中央揃え*/
　grid-template-columns: 1fr 2fr 1fr; /*列*/
  grid-template-rows: 1fr 4fr 1fr; /*行*/
}

ブラウザではこんな感じになりました。
●columns：列
●rows：行　です！
考え方はtableのときと同じですね。よくどちらか忘れてしまうので個人的に、『 l 』→列　『 r 』→行で覚えています…。
この grid-template-columns: 1fr 2fr 1fr ;  の部分ですが、親要素の幅に対して、１：２：１の割合でグリッドラインをひくことができます。(grid-template-rowsの場合は親要素の高さに対してになります)

.test{
grid-template-columns: 150px 1fr 2fr;
}

のように、固定幅を混ぜることもできます。この場合、下記画像のように150pxはそのままに残りの幅が１：２になります。

グリッドアイテムの間に隙間も作れる！

.test{
  grid-column-gap: 5px; /*幅*/
  grid-row-gap: 10px; /*高さ*/
}

上記コードを追加すると、アイテム同士の間にmarginも取れます。
margin等の書き方と同じで

.test{
  gap: 10px 5px;
}

という風にまとめることもできます。
ブラウザでみるとこんな感じになります。

グリッドアイテムを自由に配置できます！

.grid-item01{  
  grid-row: 1 / 3;　/*横ラインの１～３行間に配置*/
}

元々 ” grid-row: 1 / 2; （=隣り合った数字の場合 grid-row: 1 ;  と省略可 ）”にあった、grid-item01が3行目のところまで伸びましたね。列でも同じことができます！

.grid-item02{
  grid-column: 2 / 4;　/*縦ラインの２～４列間に配置*/
}

こんな感じに直感的にできるのがいいですね！他にも、例えば空いた隙間に自動でグリッドアイテムを埋めていくことができたりと色々な機能がありますので、またまとめていけたらと思います！