Chapter 06無料公開

グリッドコンテナー

グリッドコンテナー

グリッドコンテナーは、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グリッドを有効化する設定、というイメージをするとわかりやすいかもしれません。