Grid Layout

CSSグリッドレイアウト(以下「グリッド」と略す)は、グリッドベースのユーザインタフェースの設計方式を完全に変更するために誕生した2次元グリッドベースのレイアウトシステムである.
ウェブページをレイアウトするときはCSSをよく使いますが、思ったほど簡単ではありません.
まずテーブルを作り、使用float・position・inline-blockしかし、これらはすべて根本的に細分化され、垂直中央ソートなどの多くの重要な機能が欠けています.[ソフトボックス](Soft Box)は便利ですが、複雑な2 Dレイアウトではなく、1 Dレイアウトなので、一定の限界があります(「ソフトボックス」と「グリッド」は互いに互換性があります).
Gridは最初のCSSモジュールであり、これまでWebページを作成する際に遭遇したレイアウトの難題を解決することができます.

グリッドのコンテナ要素display: grid

列と行の大きさgrid-template-columns・grid-template-rows

子供要素grid-column・grid-row

Grid Layoutの例

1.Webレイアウト

body {
  display: grid;
  grid-template-columns: 1fr 650px 200px 1fr;
  grid-template-rows: repeat(3, auto);
  grid-template-areas: 
    ". header header ."
    ". main aside ."
    ". footer . .";
}
header {grid-area: header;}
main   {grid-area: main;}
aside  {grid-area: aside;}
footer {grid-area: footer;}

2.ユーザーカード

.profile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
}
.img     {grid-area: 1 / 1 / 2 / 3;}
.name    {grid-area: 1 / 2 / 2 / 4;}
.email   {grid-area: 1 / 4 / 2 / 5;}
.hompage {grid-area: 2 / 2 / 3 / 5;}
.desc    {grid-area: 3 / 1 / 4 / 5;}

ソース:詳細
その他の基本グリッドの概念