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 1: 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とは

CSS3で策定が進められている、Flexboxに次ぐ新たなレイアウトモジュール。

画面を縦横の格子状に分割して要素を自由に配置出来るため、従来に比べて複雑なレイアウトを容易に表現出来る。

格子状にレイアウト出来るため、縦横に整列されたページを作ることに適している。(逆に言えば、縦か横どちらかが揃っていないようなページの場合は適用するメリットは少ない)。

またMediaQueryと合わせて使用することで、画面サイズに合わせてレイアウトを変更することも出来るため、レスポンシブデザインのWebページにも適している。

対応ブラウザ

http://caniuse.com/#feat=css-grid

ChromeとかFirefoxとかSafariなんかの主要ブラウザの最新バージョンではサポートしてるっぽい(2017/04/06時点)

IE?Edge?知らない子ですね。

概要

Flexboxでは、図の左側のように、画面のレイアウトを作る時は 横に分割してから更に縦に分割 のような方法で作成していた。

対して、Grid Layoutでは、図の右側のように、 格子状に画面を分割して、それぞれの要素をどのように配置するか決める といった方法でレイアウトを作成する。

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

各要素は分割した各ブロックを組み合わせた長方形でレイアウトする。

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

レスポンシブに対応する場合、画面サイズに応じて各要素の配置を変更することで対応可能。

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

参考:https://drafts.csswg.org/css-grid/#source-independence

次回:使い方(Grid Layoutの用語と基本)

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