グリッドコンテナー
グリッドコンテナーは、Flexboxにもコンテナーがあることを学習しましたので、そこまで難しくはないですね。
チャプター4にも、Flexboxのテキストで学習をした以下の図がありましたね。
Flexboxでは、親要素であるコンテナーに、Flexboxのスタイルを以下のように指定しました。
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
.container {
display: flex;
}
CSSグリッドでは、 flex
という値の代わりに、 grid
という値を、コンテナー要素に指定します。
.container {
display: grid;
}
CSSグリッドを有効化する設定、というイメージをするとわかりやすいかもしれません。