CSSグリッドの初心者向けガイド

UnsplashのGreg Rakozyによる写真

私は2016年の終わりにCSSグリッドについて初めて耳にしました。最初のTechLadies®ミーティングの1つに座っていて、出席者がそれがどれほど素晴らしいか聞いたと言いました。 1年半後に早送りし、ようやくGridを掘り下げます。献身的なFlexboxユーザーとして、これがどのようにゲームチェンジャーになるかを既に説明できます。

CSSグリッドについて学び始めたときに私が抱えていた最大の質問は、グリッドがFlexboxとどう違うのかということでした。そして、一般的に、グリッドはFlexboxができることをすべて実行できることを発見しました。一部の人々は、グリッドは多次元レイアウト用であり、Flexboxは一次元レイアウト用であるという考え方を持っています。ただし、グリッドは1次元レイアウトにも優れています。特に後で戻って、そのレイアウトを多次元にしたい場合は特にそうです。

CSSグリッドのセットアップ

グリッドのセットアップは非常に簡単です。必要なのは2行のCSSだけです。

HTML

  
1   
2   
3   
4   
5   
6

CSS

.wrapper {
    ディスプレイ:グリッド。
    grid-template-columns:10rem 10rem 10rem;
}

そして出来上がり!グリッドがあります。真剣に、それはあなたが必要とするすべてです。とても素晴らしいです。

Flexboxを表示:flexに設定する場合とは異なり、ラッパーにdisplay:グリッドを追加してもすぐに違いは生じません。これは、グリッドに含める列の数を明示的に定義していないためです。上記のようにgrid-template-columnsでこれを行います。したがって、この例では、3つの列をそれぞれ10remの幅に設定しています。

基本的なCSSグリッド

grid-template-columnsを設定するときに任意の値を使用できますが、合計を100%にしようとしない限り、パーセンテージに近づかないことをお勧めします。これは、グリッドギャップの量(これについては後で詳しく説明します)を考慮する必要があるためです。これには少し注意が必要です。

明示的トラックと暗黙的トラック

明示的トラックと暗黙的トラックについて話す前に、最初にトラックとは何かについて話しましょう。トラックとは、列と行に番号を付ける方法です。 CSSグリッドでは、個々の列と行を個別にカウントする代わりに、トラックラインでカウントします。これが最初のグリッドです。すべてのトラックの行と列に番号を付けて、見やすくしました。

列番号と行番号が付けられたCSSグリッド

実際に、4つの列線と3つの行線があることがわかります。これは、アイテムをグリッドに配置するときに役立ちます。

簡単な注記:FirefoxのDeveloper Edition(通常のFirefoxのベータ版)を使用している場合、実際には列と行のトラック番号を表示するための優れた開発ツールがあります。ラッパー要素を調べてからレイアウトタブに移動した場合、ラッパーのボックスをオンにすると、グリッドは次のようになります。 Chromeが将来このような検査機能を追加することを本当に期待しています。非常に役立ちます。

Firefox Developer Editionインスペクターツール

明示的トラックと暗黙的トラックの違いに戻りましょう。上記からコードを取得すると、列のみが設定されていることがわかります。この場合、列を3つに明示的に設定しましたが、行を暗黙的に設定しました。 6つのアイテムがありますが、明らかにこれらのアイテムのすべてが3つの列に収まらないため、2番目の行が暗黙的に設定されます。

これは少しわかりにくいので、明示的トラックと暗黙的トラックの違いを確認するために、自分でCSSグリッドをいじることをお勧めします。

グリッドギャップの追加

グリッドギャップはマージンのように考えてください。ただし、グリッドの外側ではなく、アイテム間にのみ追加されます。 Flexboxグリッドのアイテムにマージンを追加して、グリッドのラッパーに移動し、グリッドの外側に設定されたマージンを相殺するために同じ量のマージンを負に設定するだけで、多くの場合に遭遇しました。ありがたいことにCSS Gridを使用すれば、それに対処する必要はありません。

上記のサンプルCSSを使用して、グリッドギャップを追加しましょう。

.wrapper {
  ディスプレイ:グリッド。
  grid-template-columns:10rem 10rem 10rem;
  グリッドギャップ:1rem;
}
1レムのグリッドギャップを持つCSSグリッド

簡略プロパティgrid-gapを使用しましたが、grid-column-gapとgrid-row-gapを使用して、列と行の明示的な値を定義できます。

*注:Chrome 66では、グリッドギャップがギャップに、グリッドカラムギャップ/グリッド行ギャップが列ギャップ/行ギャップに変更されます。

Repeat()関数

grid-template-columnsをすべて同じ幅の3つの列で使用するときに、各列の幅を定義するのは非常に簡単です。しかし、それより多くの列が必要な場合は、多くの入力が必要です。これがrepeat()関数の出番です。

これは、repeat()関数を追加して使用した例です。

.wrapper {
  ディスプレイ:グリッド。
  grid-template-columns:repeat(3、10rem);
  グリッドギャップ:1rem;
}

CSSでわかるように、3つの列をそれぞれ10レムの幅に設定しています。このグリッドは、グリッドギャップの例で示したグリッドとまったく同じように見えます。 repeat()関数を使用することで、多くの列を設定したい場合に、記述を少し簡単に、読みやすくするだけです。

分数単位

小数単位、またはfrは、CSSグリッドで導入された新しいCSSの長さの単位であり、常に自分が使用していることがわかります。すべて同じ幅の3列が必要だとします。アイテムに幅:calc(100%/ 3)を設定する代わりに、小数単位を使用できます。小数単位を「空き領域」と考えてください。

私たちが使ってきた例を続けましょう。

.wrapper {
  ディスプレイ:グリッド。
  grid-template-columns:1fr 1fr 1fr;
  グリッドギャップ:1rem;
}

変更したのはgrid-template-columnsだけだったことがわかります。ブラウザに3つの列が必要であり、各列に小数単位または「空き領域」を1つ占有するように伝えています。これは、Flexboxのflex-growプロパティと非常によく似ています。

小数単位を使用したCSSグリッド

各アイテムが前の例よりも少し広い理由は、3つの列に収まるようにできる限り多くのスペースを使用しているためです。この場合、ハード幅を設定しなかったため、画面の全幅を占有します。これを自分の画面に表示せずに見るのは少し難しいので、自分でこれをいじることをお勧めします。

すべての列を1frに設定する必要もありません。以下は、最初と3番目の列を10レムに設定し、中央の列を1frに設定した例です。列を2fr、3frなどに設定することもできます。その列のアイテムは、2倍、3倍などのスペースを占有します。

中央の列のみが1frに設定されたCSSグリッド

個々のグリッドアイテムのサイズ設定

個々のグリッドアイテムのサイズ設定について説明します。 grid-template-columnsで幅を明示的に設定するため、個々のアイテムにハード幅を配置することはできません。しかし、この例の項目5を複数の列の幅にしたい場合はどうでしょうか?グリッド列とスパンを使用してこれを行うことができます。

.wrapper {
  ディスプレイ:グリッド。
  grid-template-columns:repeat(3、10rem);
  グリッドギャップ:1rem;
}
.item5 {
  グリッド列:スパン2。
}

上記のように、アイテム5のグリッド列をスパン2に設定し、アイテム5を2列の幅に設定できることがわかります。

個々のアイテムにスパンを持つCSSグリッド

しかし、アイテム5を3列に広げたい場合はどうでしょうか?これが起こることです。

3つの列にまたがる項目5にまたがるCSSグリッド

項目5は自然に2列目から始まるため、設定した合計幅に対応する十分なスペースがありません。そのため、次の行に移動します。アイテムを複数の行にまたがる場合は、グリッド列からグリッド行に同じ概念を適用できます。

アイテム5の残りの空白を修正するには、非常に簡単な解決策があります。アイテムを行または列に設定する場合に使用できます。grid-auto-flow:dense。

.wrapper {
  ディスプレイ:グリッド。
  grid-template-columns:repeat(3、10rem);
  グリッドギャップ:1rem;
  グリッド自動フロー:密;
}
.item5 {
  グリッド列:スパン3。
}

CSSグリッドでは、グリッドはアイテムが適合するかどうかを自動的に確認します。前述したように、アイテムが収まらない場合、次の行に進みます。 Grid-auto-flow:denseは、グリッドに、それらの空のスペースを適合するアイテムで埋めるように指示します。この場合、グリッドが自動的に移動し、6番目のアイテムが空のスポットに移動するように、7番目のグリッドアイテムを追加しました。

CSSグリッドは、特定の場所に最初に行く必要があるアイテムを常にレイアウトします。この場合、アイテム5は3列にまたがっているためです。次に、grid-auto-flow:denseセットがある場合、グリッド上の空白のスポットに収まる他のアイテムを探します。

グリッド自動フローを使用したCSSグリッド:高密度

grid-auto-flowプロパティ自体は、アイテムを既に定義した後に別の行または列を追加する必要がある方向を決定します。行がデフォルトです。 grid-auto-flowを使用する以外に、これの大きなユースケースはありません:高密度。

グリッドアイテムの配置

個々のグリッドアイテムのサイズを変更する例では、もともとアイテム5をgrid-column:span 2に設定していました。これにより、アイテム5を2つの列に広げることができました。実際、grid-columnは、grid-column-startとgrid-column-endの省略形です。同じことがグリッド行にも当てはまります。

したがって、技術的には、項目5をgrid-column-start:span 2およびgrid-column-end:autoに設定していました。基本的に、グリッドにアイテム5を自然に開始するように指示していましたが、サイズは2倍になります。

アイテム5をもう一度使用してみましょう。FirefoxDeveloper Editionのインスペクターツールを使用してこれを紹介し、アイテム5のトラックを簡単に確認できるようにします。また、グリッドアイテムをいくつか追加しました。

.wrapper {
  ディスプレイ:グリッド。
  grid-template-columns:repeat(3、10rem);
  グリッドギャップ:1rem;
}
.item5 {
  grid-column-start:1;
  grid-column-end:3;
}

CSSグリッドは、5番目の項目の前にすべての項目をレイアウトし、停止してから項目5を開始および終了した場所を確認し、指示した場所に配置します。これの省略形はグリッド列です。1/ 3は1が開始値で、3が終了値です。

grid-column-startおよびgrid-column-endを使用したCSSグリッド

また、個々のグリッドアイテムに、どのくらいの幅を広げたいのか、どこに終わらせたいのかを伝えることができます。この例では、省略形のグリッド列プロパティを使用しているので、トラックライン4で終わる2つの列にまたがるように項目5を指定しています。

.wrapper {
  ディスプレイ:グリッド。
  grid-template-columns:repeat(3、10rem);
  グリッドギャップ:1rem;
}
.item5 {
  グリッド列:スパン2/4;
}
グリッド列の略記プロパティを持つCSSグリッド

アイテムをグリッドの幅全体に広げたいが、グリッドの幅がわからない場合は、grid-column:1 / -1を設定できます。基本的に、-1の値は、アイテムが最後のトラックまでずっと進むように指示しています。行でこれを行うと、アイテムがグリッドの一番下まで移動しない場合があることに気付くでしょう。明示的な行ではなく、明示的な行の一番下にのみ移動します。

資源

CSSグリッドをさらに深く掘り下げるために私が強くお勧めするリソースを次に示します。

  • Wes BosのCSSグリッドチュートリアル-完全に無料で、グリッドについて学んだ場所です。彼の教え方が大好きです!
  • CSSグリッドのCSSグリッドの完全ガイド—これには、グリッドの特定の側面にこだわった場合の素晴らしいチートシートがあります。
  • CSS Grid Garden — CSS Gridについて学んだことを実践する楽しい方法です。これを試みる前にチュートリアルを行うことをお勧めします。

CSSグリッドに関する私のチュートリアルをお読みいただきありがとうございます!恐ろしい「自分について教えてください」インタビューの質問、「なぜブートキャンプの卒業生を雇うべきか」、または開発者になった経緯についての私の記事をご覧ください。

そして、テクノロジーに関するたくさんのつぶやきについてはTwitterでフォローしてください。正直なところ、犬に関するたくさんのつぶやきも。