1. HOME
  2. html_css
  3. グリッドレイアウト(css grid)についてのまとめ

グリッドレイアウト(css grid)についてのまとめ

グリッドレイアウトをやるにあったって知っておきたいこと

グリッドの用語集

コンテナ

グリッド全体を囲む親要素

アイテム

コンテナ直下の子要素

ライン

グリッドの区切る垂直or水平の線

トラック

グリッドの行or列のこと

セル

アイテム1つ分の領域

エリア

複数のセルが結合された領域

上の図のようにレイアウトを作るのであれば

html

cssでトラックの大きさを指定する

cssを指定するために覚えておきたいcssは2つ。

grid-template-rows

→プロパティで行(縦方向)の高さを指定

grid-template-columns

→プロパティで列(横方向)の高さを指定

css

これで先ほどのレイアウトが完成する。

アイテムを指定する方法

この位置に配置するには。。。

その1アイテムのみの位置を指定する方法

css

その2アイテムのみの位置を指定する方法

css

他のカテゴリーの記事をみる