CSSグリッドチュートリアル

CSSグリッドはCSSタウンの新しい子供であり、まだすべてのブラウザーで完全にサポートされているわけではありませんが、レイアウトの将来のシステムになるでしょう。

グリッド。デジタルフロンティア。私は、情報のクラスターがコンピューター内を移動するときにそれらを描写しようとしました。彼らはどのように見えましたか?船?オートバイ?サーキットは高速道路のようでしたか?見たこともないと思っていた世界を夢見ていた。そしてある日..私は入った。—トロン:レガシー

CSSグリッドの概要

CSSグリッドは、CSSを使用してレイアウトを構築するための根本的に新しいアプローチです。

目を離さないでくださいcaniuse.comのCSSグリッドレイアウトページ現在サポートしているブラウザを確認します。 2019年4月の執筆時点で、すべての主要なブラウザー(IEを除く)はすでにこのテクノロジーをサポートしており、すべてのユーザーの92%をカバーしています。

CSSグリッドは競合他社ではありませんFlexbox。 CSSグリッドは2つのディメンション(行と列)で機能し、Flexboxは1つのディメンション(行または列)で機能するため、これらは複雑なレイアウトで相互運用および連携します。

Webのレイアウトの構築は、伝統的に複雑なトピックでした。

それ自体が複雑なトピックであるこの複雑さの理由については掘り下げませんが、最近では非常に幸運な人間だと考えることができます。あなたはあなたの処分で2つの非常に強力でよくサポートされたツールを持っています

  • CSSFlexbox
  • CSSグリッド

これら2つは、将来のWebレイアウトを構築するためのツールです。

IE8やIE9のような古いブラウザをサポートする必要がない限り、次のようなものをいじる理由はありません。

  • テーブルレイアウト
  • フロート
  • clearfixハック
  • display: tableハック

このガイドでは、CSSグリッドのゼロ知識から熟練したユーザーになるために知っておく必要のあるすべてがあります。

基礎

CSSグリッドレイアウトは、コンテナ要素でアクティブ化されます(divまたは他のタグ)を設定してdisplay: grid

フレックスボックスと同様に、コンテナにいくつかのプロパティを定義し、グリッド内の個々のアイテムにいくつかのプロパティを定義できます。

これらのプロパティを組み合わせることで、グリッドの最終的な外観が決まります。

最も基本的なコンテナプロパティは次のとおりです。grid-template-columnsそしてgrid-template-rows

grid-template-columnsおよびgrid-template-rows

これらのプロパティは、グリッド内の列と行の数を定義し、各列/行の幅も設定します。

次のスニペットは、幅200ピクセルの列が4列、高さが300ピクセルの行が2行のグリッドを定義しています。

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}

A grid with 4 columns and 2 rows

2列2行のグリッドの別の例を次に示します。

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
}

A grid with 2 columns and 2 rows

自動寸法

多くの場合、ヘッダーサイズ、フッターサイズ、および長さに応じて高さが柔軟なメインコンテンツがあります。この場合、あなたは使用することができますautoキーワード:

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
}

異なる列と行のディメンション

上記の例では、行に同じ値を使用し、列に同じ値を使用して、きれいで規則的なグリッドを作成しました。

各行/列に任意の値を指定して、さまざまなデザインを作成できます。

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
}

A grid with varying columns and rows dimensions

もう一つの例:

.container {
  display: grid;
  grid-template-columns: 10px 100px;
  grid-template-rows: 100px 10px;
}

A grid with varying columns and rows dimensions

セル間にスペースを追加する

特に指定がない限り、セル間にスペースはありません。

これらのプロパティを使用して、間隔を追加できます。

  • grid-column-gap
  • grid-row-gap

または省略構文grid-gap

例:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

A grid with gap between rows and columns

省略形を使用した同じレイアウト:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-gap: 25px;
}

複数の列や行にアイテムを生成する

すべてのセルアイテムには、行内の1つ以上のボックスを占有し、コンテナに設定されたグリッド比率を尊重しながら、水平方向または垂直方向に拡張してスペースを増やすオプションがあります。

そのために使用するプロパティは次のとおりです。

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

例:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-column-start: 3;
  grid-column-end: 5;
}

Editing the dimensions of some cells

番号は、1から始まる各列を区切る縦線に対応しています。

The numbers correspond to the vertical line that separates each column

同じ原則がgrid-row-startそしてgrid-row-end、今回を除いて、より多くの列を取得する代わりに、セルはより多くの行を取得します。

省略構文

これらのプロパティには、以下によって提供される簡略構文があります。

  • grid-column
  • grid-row

使い方は簡単です。上記のレイアウトを複製する方法は次のとおりです。

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / 4;
}
.item6 {
  grid-column: 3 / 5;
}

使用するgrid-area速記として

ザ・grid-areaプロパティは、の省略形として使用できます。grid-columnそしてgrid-row両方を単一の要素に適用する必要がある場合の省略形。持つ代わりに:

.item1 {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
}

使用できます

.item1 {
  grid-area: 1 / 3 / 4 / 5;
}

(grid-row-start / grid-column-start / grid-row-end / grid-column-end)

使用するspan

別のアプローチは、開始列/行を設定し、それを使用して占有する数を設定することです。span

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / span 2;
}
.item6 {
  grid-column: 3 / span 2;
}

span非短縮構文でも機能します。

.item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

また、startプロパティで使用することもできます。この場合、終了位置が基準として使用され、span「戻る」とカウントします:

.item1 {
  grid-column-start: span 2;
  grid-column-end: 3;
}

より多くのグリッド構成

分数を使用する

各列または行の正確な幅を指定することは、すべての場合に理想的ではありません。

分数はスペースの単位です。

次の例では、グリッドを同じ幅の3つの列に分割します。13それぞれの利用可能なスペースの。

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

パーセンテージとレムの使用

パーセンテージを使用して、分数、ピクセル、レム、パーセンテージを組み合わせて使用することもできます。

.container {
  grid-template-columns: 3rem 15% 1fr 2fr
}

使用するrepeat()

repeat()行/列が繰り返される回数とそれぞれの長さを示す数値を受け取る特殊関数です。

すべての列の幅が同じである場合は、次の構文を使用してレイアウトを指定できます。

.container {
  grid-template-columns: repeat(4, 100px);
}

これにより、同じ幅の4つの列が作成されます。

または分数を使用する:

.container {
  grid-template-columns: repeat(4, 1fr);
}

行の最小幅を指定します

一般的な使用例:ウィンドウのサイズを変更するときに、特定のピクセル数を超えて折りたたまれないサイドバーを用意します。

これはサイドバーが取る例です14画面の200px未満を取ることはありません:

.container {
  grid-template-columns: minmax(200px, 3fr) 9fr;
}

を使用して最大値のみを設定することもできますautoキーワード:

.container {
  grid-template-columns: minmax(auto, 50%) 9fr;
}

または単に最小値:

.container {
  grid-template-columns: minmax(100px, auto) 9fr;
}

を使用した要素の配置grid-template-areas

デフォルトでは、要素はHTML構造内の順序を使用してグリッドに配置されます。

使用するgrid-template-areasテンプレート領域を定義して、グリッド内でそれらを移動したり、を使用する代わりに複数の行/列にアイテムを生成したりすることもできます。grid-column

次に例を示します。

<div class="container">
  <main>
    ...
  </main>
  <aside>
    ...
  </aside>
  <header>
    ...
  </header>
  <footer>
    ...
  </footer>
</div>
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

元の注文にもかかわらず、アイテムはどこに配置されますgrid-template-areasに応じて定義しますgrid-areaそれらに関連付けられたプロパティ。

テンプレート領域に空のセルを追加する

ドットを使用して空のセルを設定できます.のエリア名の代わりにgrid-template-areas

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    ". header header ."
    "sidebar . main main"
    ". footer footer .";
}

ページをグリッドで埋める

を使用して、グリッドを拡張してページを埋めることができますfr

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

これは、CSSグリッドを使用して、ヘッダーopトップ、左側にサイドバー、右側にコンテンツを含む主要部分、およびその後のフッターを提供するサイトレイアウトを作成する簡単な例です。

Layout example

マークアップは次のとおりです。

<div class="wrapper">
  <header>Header</header>
  <article>
    <h1>Welcome</h1>
    <p>Hi!</p>
  </article>
  <aside><ul><li>Sidebar</li></ul></aside>
  <footer>Footer</footer>
</div>

そしてこれがCSSです:

header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
}
article {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
}
aside {
  grid-area: sidebar;
  background-color: #45aaf2;
}
footer {
  padding: 20px;
  grid-area: footer;
  background-color: #fd9644;
}
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

きれいにするためにいくつかの色を追加しましたが、基本的にはすべての異なるタグに割り当てられますgrid-areaで使用される名前grid-template-areasのプロパティ.wrapper

レイアウトが小さい場合は、メディアクエリを使用してコンテンツの下にサイドバーを配置できます。

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

CodePenを参照してください

ペンを見るサイドバー付きのCSSグリッドの例フラビオ・コープス(@flaviocopes) オンCodePen

Tech Wiki Online!