ShadowCorridor2タイトル及びロゴ公開!詳しくはこちら

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

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

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

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

目次

HTMLコード

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次