【CSS】グリッドを使いたい。「display:grid;」の基本

使えたら便利そうなグリッドプロパティ。

１度勉強してさっぱり忘れてしまったので復習を兼ねて書きます。

プロパティは沢山あるみたいですが、基本的なプロパティだけです。

HTMLコード

これからCSSを適用するHTMLです。

このコードに基本的なグリッドのプロパティを適用していきます。

CSSにグリッドプロパティだけ書きたいので、装飾はインラインに書いています。

ごちゃごちゃしていますが親要素（コンテナ）の幅と高さ、子要素（アイテム）の背景色、文字色、文字の太さ、パディングを設定しているだけです。

今回大事なのはCSSなので、HTMLは「.grid-containerが親要素で.grid-item(n)が子要素」という部分だけ覚えて、他は無視してOKです。

See the Pen grid-1 by SHIITAKE (@SHIITAKE365) on CodePen.

グリッドコンテナ / グリッドアイテム

まずはこちらの図をご覧ください。

外枠の黒線が「.grid-container」に当たる部分で「グリッドコンテナ」と呼ばれます。

グリッドアイテム（例としてグリッドアイテム７）を囲っている黒線が「.grid-item(n)」に当たる部分で「グリッドアイテム」と呼ばれます。

グリッドコンテナを指定する「display:grid;」

先程の画像の通りになるようCSSを適用していきます。

まず「.grid-container」に「display:grid;」を適用します。

これで「.grid-container」はグリッドコンテナになり、「.grid-item(n)」はグリッドアイテムになります。