Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

CSS Grid Layoutについて調べてみた〜Part 2: 使い方(Grid Layoutの用語と基本)

More than 3 years have passed since last update.

何番煎じか分からないけど、CSSのGrid Layoutについて調べてみたのでまとめてみる。

Part 1: Grid Layoutの概要
Part 2: 使い方(Grid Layoutの用語と基本)(イマココ)
Part 3: 使い方(グリッドコンテナ、アイテムの作り方)
Part 4: 実際にGrid Layoutを使ってみる
Part 5: レスポンシブデザイン対応してみる

用語

Grid Layoutでよく出てくる用語をまとめる。

グリッドコンテナ

分割の対象となる要素。FlexboxのFlexコンテナと同様。

CSSでdisplay: grid;を指定した要素がグリッドコンテナとなる。

グリッドアイテム

グリッドコンテナに配置される各要素。FlexboxのFlexアイテムと同様。

グリッドコンテナ直下の要素は基本的に全てグリッドアイテム(レイアウト対象)となる。

グリッドの構成要素

ライン

グリッドを構成する縦横の線(下図参照)

最外にも存在し、上→下、左→右の順に、1〜nまで番号が振られる。

セル

ラインによって分割された各ブロック(下図参照)

エリア

複数のセルによって構成される長方形(下図参照)

スクリーンショット 2017-04-06 16.30.26.png

Grid Layoutの作り方の基本

構成

Grid Layoutは基本的に1つのグリッドコンテナと複数のグリッドアイテムによって構成される。

グリッドコンテナで分割方法とエリアを設定し、各グリッドアイテムでどのエリアに配置されるかを指定することで全体のレイアウトを構築する。

グリッドコンテナで定義したグリッドの各ライン、及びエリアには任意に名前を割り当てることが出来る。
※ 具体的な定義方法は次回に詳しく説明する。

配置方法

グリッドアイテムを配置する方法は以下の3つ。

  1. 空きセルに自動的に配置
  2. エリア名を指定して配置
  3. 行、列のラインのstart,end or spanを指定して配置

例として、グリッドコンテナで以下のようなグリッドを定義したとする(行:ライン1〜5、列:ライン1〜4、エリア:a, b)

スクリーンショット 2017-04-06 20.34.53.png

ここで任意のグリッドアイテムをエリアa, bに配置する場合、エリア名a, bを直接指定して配置するか、

  • エリアa:行:2〜3、列:1〜2
  • エリアb:行:3〜5、列:2〜4 or 行:3から2つ分、列:2から2つ分

のように、行、列のラインのstart, endを指定して配置することが出来る。

この際、配置方法を指定されない(もしくは明示的に自動配置を指定された)グリッドアイテムは自動的に左上→右下に向かって空きセルに配置される。自動配置の方法(行→列 or 列→行)はグリッドコンテナにて指定することが出来る。

次回:使い方(グリッドコンテナ、アイテムの作り方)

k_tada
Javascriptをこよなく愛するしがないフロントエンドエンジニアです。( ゚∀゚)o彡°React!React!
https://k-tada.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away