0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Grid Layout

Last updated at Posted at 2018-11-10

Grid Layoutの作り方

Grid Layoutはレイアウトを囲むコンテナの要素(例では.container)にその子要素の配置の仕方を指定していきます。Flexboxと違い、要素を並べる行・列コンテナとなる要素を用意する必要はありません。

## 親要素に以下を指定

要素に display: grid を指定すると、その要素はグリッドコンテナになります。

display: grid

グリッドコンテナを縦・横に分割します。

縦方向に分割した各列のサイズは

/* 1列目から順番に180px、1fr、160pxの幅 */
grid-template-columns: 180px 1fr 160px;

横方向に分割した各行のサイズは

/* 1行目から順番に60px 1fr 90pxの高さ */
grid-template-rows: 60px 1fr 90px;

補足ですが

「fr」 という単位はなんだろう

メインエリアの幅指定に「fr」という単位を使います。
frはグリッドコンテナの中を分割するサイズの指定に使える単位です。全体の幅からfr以外の単位(pxや%など)で指定したものを引き、残りの幅がfrで指定された列に配分されます。

列・行のことを何ていう?

グリッドトラックといいます。

列・行を分割した線を何ていう?

グリッドラインといいます。

グリッドアイテムって?

グリッドコンテナ直下の子要素をグリッドアイテムといいます。

0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?