例えば、画像とテキストを横に並べたい時に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;
}
最後に例えば画像を配置するとこんな感じです。
例えば写真を左に配置して文字を右に沿わせるレイアウトです。
いろんな方法がありますが、覚えておきたいレイアウトの一つです。
