LoginSignup
0
1

More than 5 years have passed since last update.

CSS グリッドレイアウトについて個人的まとめ(用語まとめ)

Posted at

自分用にまとめたものです。
主に、MDNなどを読むときの用語まとめになりました。

Gridレイアウトとは

Flexとの違い

flexは1次元。基本、1列 or 1行。
それに対して、gridは二次元。縦横に行と列を作ってレイアウトできる。
はるか昔の遺産、tableレイアウトを想像してもらえれば。

Gridの構成

Gridコンテナ

後述するグリッドアイテムの直接の親要素。
display: gridを設定することで、コンテナとして扱われる。

GridトラックとGridライン

グリッドトラックは2つのグリッドラインの間の領域の事。
トラックは、grid-template-columns grid-template-rowsとそのショートハンドで定義されます。
ラインは、トラックが定義される事で作成されます。

Gridアイテム

グリッドコンテナの直接の子要素。
グリッドコンテナに設定するstyleによって、アイテムのレイアウトが決定される。

参考

CSS グリッドレイアウト
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1