例えば、画像とテキストを横に並べたい時にfloatやflexを使うことがありますが、gridでも簡単に表現できます。
floatやflexを使うと結構悩むのが次のようなレイアウトです。
固定要素を左側寄せのパターン
width:120px
width:auto
<div class="demo_box"> <div class="demo_item">width:120px</div> <div class="demo_item">width:auto</div> </div>
これはgridを使うと簡単にできます。
固定要素を右側寄せのパターン
width:auto
width:120px
<div class="demo_box2"> <div class="demo_item">width:auto</div> <div class="demo_item">width:120px</div> </div>
CSSはこちら
.demo_box { display: grid; grid-template-rows: 150px; grid-template-columns: 120px auto; background-color:#e7e3d2; padding:5px; width:auto; } .demo_item { margin:5px; background-color:#f7f5f0; color:#555; border-radius: 5px; align-items: center; justify-content: center; display: flex; } .demo_box2 { display: grid; grid-template-rows: 150px; grid-template-columns: auto 120px; background-color:#e7e3d2; padding:5px; width:auto; }
最後に例えば画像を配置するとこんな感じです。

例えば写真を左に配置して文字を右に沿わせるレイアウトです。
いろんな方法がありますが、覚えておきたいレイアウトの一つです。