gridはグリッドレイアウトが設計できるCSSプロパティです。
各ブラウザ対応が懸念され、なかなか踏み込みにくい印象のgridですが手軽にグリッドレイアウトが実現可能です。今回はIE11の対応も含めサンプル付きで解説していきます。
CSS gridの基本的な使い方
最終的に以下のようなグリッドレイアウトを作成する想定で解説します。

HTMLの設定
グリッドコンテナとなる親要素はwrap_gridで囲み、item1~item5を子要素( グリッド )とします。
<div class="wrap_grid">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div><!-- wrap_grid -->
親要素の設定
グリッドコンテナ親要素のwrap_gridに以下を設定します。
display: grid;にします。
grid-template-columnsカラムの幅や割合を設定します。
.wrap_grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
grid-template-columns: 1fr 1fr 1fr; で三等分にされます。
他に以下のような書き方でもOKです。
grid-template-columns: 33.33%, 33.33%, 33.33%;
grid-template-columns: repeat(3, 1fr);
子要素(グリッド)の設定
grid-rowで行のエリアを指定、grid-columnで列のエリアを指定できます。
エリアはグリッド線を基準として
grid-row: 【グリッドの開始位置】/ 【グリッドの終了位置】 ;
のように指定します。
以下では.item1(紫)の行エリアの指定とitem2(ピンク)の列エリアの指定をしています。

.wrap_grid .item1{
background: #c881ff;
grid-row: 1/3;
}
.wrap_grid .item2{
background: #ffa1c0;
grid-column: 2/4;
}
.item4と.item5にも同じようにエリア指定を付けます。
.wrap_grid .item4{
background: #6ce9ff;
grid-column: 1/3;
}
.wrap_grid .item5{
background: #9381ff;
grid-row: 2/4;
grid-column: 3/4;
}
こちらで IE対応を除く基本的な設定は終了です。
CSS gridのIE11対応
IEに対応するにはIE用のベンダープレフィックスが必要です。
以下のサイトからIE用のベンダープレフィックスを自動育成してくれるツールを使用します。
以下の手順で対応させます。
1.columnとrowに関する設定をどちらもしておく
IEではcolumnとrowの設定ではどちらかを省略することができないので上記のcssの体裁を少し整える必要があります。
親要素ではgrid-template-columns: 1fr 1fr 1fr;のみの設定でしたが
grid_template-rows: auto auto auto;も設定しておきます。
子要素も同じようにgrid-columnとgrid-rowを設定します。
.wrap_grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid_template-rows: auto auto auto;
}
.wrap_grid div{
text-align: center;
color: #FFF;
font-size: 200%;
padding: 100px 0;
}
.wrap_grid .item1{
background: #c881ff;
grid-column: 1/2;
grid-row: 1/3;
}
.wrap_grid .item2{
background: #ffa1c0;
grid-column: 2/4;
grid-row: 1/2
}
.wrap_grid .item3{
background: #6cffd4;
grid-column: 2/3;
grid-row: 2/3;
}
.wrap_grid .item4{
background: #6ce9ff;
grid-column: 1/3;
grid-row: 3/4;
}
.wrap_grid .item5{
background: #9381ff;
grid-row: 2/4;
grid-column: 3/4;
}
このようにrowとcolumnの設定を記述します。
2.Autoprefixerで変換する
IE用のベンダープレフィックスを自動で付与してくれるオンラインツールで変換します。

左側にCSSを張り付けると自動でIE対応CSSが育成されます。
他のブラウザも問題なく見れます。
まとめ
今回は基本的な使い方のみの解説でした。IE対応については記述の仕方が結構違うので覚えるよりも変換することをお勧めします。
2021.3時点では勧告候補なので実践で使用する際は確認しておいたほうがよいでしょう。

場合によってはflexのほうが適しているときもあるのでうまく使い分けできたらよいです。