css gridについて少し書きました。

ブラウザの対応状況(2020年)

一番気になるのがブラウザの対応状況。
いろいろ調べたところ下記が一番分かりやすい。
参考: https://webdesign-trends.net/entry/11237
参考: https://qiita.com/morishitter/items/738488290451555d913c

上の記事にもある通りブラウザの対応はIEの一部を除き、問題なさそうです。

出来ること

grid-template-rows : 行の高さの指定
grid-template-columns: 列の幅の指定
grid-row-gap: 行の隙間の設定
grid-column-gap: 列の間の隙間設定

アイテムの配置も指定できる
grid-row: アイテムを行のどこに配置したいかスラッシュ区切りで指定
grid-column: アイテムを列のどこに配置したいかスラッシュ区切りで指定

まとめ

flexboxに比べて少し掴みづらいところもあると思いますが、マスターすると複雑なレイアウトも簡単に組めるようになるかもしれませんね。
gridについてもっと細かく説明してくれているサイトはたくさんあるようなので、どういった場合に使うかや、よく似ているflexboxの違いなどここではなかなか説明できませんがどんどん使っていければなと思います。

参考サイト
https://qiita.com/kura07/items/e633b35e33e43240d363
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout