CSS Grid Layout について - Qiita

先日の macOS と iOS のアップデートに CSS Grid Layout Module が実装された Safari のバージョンが入り、とうとう全てのモダンブラウザで使用可能となりました。非常に柔軟に、直感的にグリッドを表現することができます。 Can I Use Grid の定義 ある要素をグリッドレイアウトしたいとき、その親要素に display: grid もしくは display: inline-grid を指定します。この親要素のことをグリッドコンテナ、グリッドレイアウトされる子要素のことをグリッドアイテムと言います。 グリッドコンテナには grid-template-column と grid-template-row というプロパティを指定することができます。それぞれ、列と行のグリッドのサイズをその数だけ指定します。 例: 3行5列のグリッド .container {

[honeybe]

ふむ / 実運用に投入するにはもう少し時間がかかるかな…

[noonworks]

“恩恵は、display: grid と書くことでグリッドが表現でき、コードにデザインの意図が載ること”

[Nyoho]

display: grid or inline-grid -> grid-template-column and grid-template-row

[wordi]

Grid Layoutについて

[satotaka99]

グリッドはcss grid、レイアウトはflexbox

[cocoasynn]

知らなかった。良い。

[ko-ya-ma]

待ってた。嬉しい