グリッド

The CSS Podcast - 011: Grid

ウェブデザインでよく使われるレイアウトは、ヘッダー、サイドバー、本文、フッターのレイアウトです。

これまで、このレイアウトを解決する方法は多数ありますが、CSS グリッドを使用すると、比較的簡単なだけでなく、多くのオプションがあります。グリッドは、外部的なサイズ設定で提供されるコントロールと固有のサイズ設定の柔軟性を組み合わせる場合に非常に便利であり、この種のレイアウトに最適です。これは、グリッドが 2 次元コンテンツ用に設計されたレイアウト メソッドであるためです。つまり、物事を行と列に同時に配置します。

グリッド レイアウトを作成する際には、行と列で構成されるグリッドを定義します。そのグリッドにアイテムを配置するか、作成したセルにブラウザがアイテムを自動的に配置できるようにします。グリッドはたくさんありますが、利用可能な機能の概要があれば、すぐにグリッド レイアウトを作成できます。

概要

では、グリッドで何ができるでしょうか。 グリッド レイアウトには次の機能があります。 このガイドでは、それらすべてについて説明します。

1. グリッドは行と列で定義できます。 これらの行トラックと列トラックのサイズは、自分で選択できます。また、コンテンツのサイズに応じて調整することもできます。
2. グリッド コンテナの直接の子は、このグリッドに自動的に配置されます。
3. 希望する正確な位置にアイテムを配置することもできます。
4. グリッド上の線と領域に名前を付けると、配置しやすくなります。
5. グリッド コンテナ内の空きスペースをトラック間で分配できます。
6. グリッド アイテムは領域内に配置できます。

グリッドの用語

CSS に実際にレイアウト システムを導入したのは初めてであるため、グリッドに多数の新しい用語が加わりました。

グリッド線

グリッドは水平方向と垂直方向に 並ぶ線で構成されますグリッドが 4 列の場合、最後の列の後にある列を含め、列行は 5 列になります。

行に番号は 1 から付けられ、コンポーネントの書き込みモードとスクリプトの方向に従って番号付けされます。つまり、列行 1 は、英語などの左から右に記述する言語では左側、アラビア語など、右から左に記述する言語では右側になります。

グリッド トラック

トラックとは、2 つのグリッド線間のスペースです。 行トラックは 2 つの行行の間にあり、列トラックは 2 つの列行の間にあります。 グリッドを作成するときは、トラックにサイズを割り当てて作成します。

グリッドセル

グリッドセルは、行トラックと列トラックの交点によって定義されるグリッド上の最小のスペースです。 表のセルやスプレッドシート内のセルに似ています。 グリッドを定義しても、アイテムを 1 つも配置しない場合、定義されたグリッドセルごとに 1 つのアイテムが自動的に配置されます。

グリッド領域

複数のグリッドセルが結合された状態。 グリッド領域は、アイテムを複数のトラックにまたがって作成されます。

ギャップ

線路と線路の間の側溝または路地。 サイズ調整に関しては、通常のトラックのように機能します。 ギャップにコンテンツを配置することはできませんが、コンテンツを横断してグリッド アイテムを広げることは可能です。

グリッド コンテナ

display: grid が適用されている HTML 要素。したがって、直接の子に新しいグリッド書式設定コンテキストを作成します。

.container {
  display: grid;
}

グリッド アイテム

グリッド アイテムは、グリッド コンテナの直接の子アイテムです。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

行と列

基本的なグリッドを作成するには、次のように、3 つの列トラック、2 つの行トラック、トラック間を 10 ピクセルのギャップとするグリッドを定義します。

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

このグリッドは、用語のセクションで説明した多くの事柄を示しています。3 つの列トラックがあります。トラックごとに異なる長さの単位が使用されます。これには 2 つの行トラックがあり、1 つは長さの単位を使用、もう 1 つは自動です。トラックのサイズの自動表示として使用する場合は、コンテンツと同じサイズと考えることができます。トラックはデフォルトで自動サイズ設定されます。

クラスが .container の要素に子アイテムがある場合、その子アイテムはすぐにこのグリッドに配置されます。この実際の動作は、以下のデモで確認できます。

Chrome DevTools のグリッド オーバーレイを使用すると、グリッドのさまざまな部分を把握できます。

Chrome でデモを開きます。 背景がグレーの要素（ID が container）を確認します。DOM で .container 要素の横にあるグリッドバッジを選択して、グリッドをハイライト表示します。 [Layout] タブのプルダウンから [Display Line Numbers] を選択すると、グリッドに行番号が表示されます。

固有のサイズ設定キーワード

サイズ単位のセクションで説明されている長さとパーセンテージのディメンションに加えて、グリッド トラックでは固有のサイズ キーワードを使用できます。これらのキーワードは Box Sizing の仕様で定義されており、グリッド トラックだけでなく CSS でボックスサイズを設定する方法を追加します。

• min-content
• max-content
• fit-content()

min-content キーワードにより、トラックのコンテンツがオーバーフローすることなく、トラックが可能な限り小さくなります。サンプルのグリッド レイアウトを変更して 3 列トラックをすべて min-content サイズにすると、トラック内の最も長い単語と同じくらい狭くなります。

max-content キーワードは逆の効果です。トラックの幅は、すべてのコンテンツを表示するのに十分な幅になります。これにより文字列がラップされないため、オーバーフローが発生する可能性があります。

fit-content() 関数は、最初は max-content のように動作します。ただし、トラックが関数に渡したサイズに達すると、コンテンツのラップが開始されます。したがって、fit-content(10em) は、max-content のサイズが 10 em 未満の場合、10 em 未満のトラックを作成します。ただし、10 em を超えることはありません。

次のデモでは、グリッド トラックのサイズを変更して、さまざまな固有のサイズ調整キーワードを試します。

fr ユニット

既存の長さの基準、パーセンテージ、およびこれらの新しいキーワードがあります。グリッド レイアウトでのみ機能する特別なサイズ設定方法も存在します。これは fr 単位であり、グリッド コンテナ内の利用可能なスペースの共有を表す柔軟な長さです。

fr ユニットは、フレックスボックスで flex: auto を使用する場合と同様に機能します。アイテムがレイアウトされた後にスペースを分配します。したがって、使用可能なスペースを同じ割合で割り当てる 3 つの列は次のようになります。

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

fr ユニットは利用可能なスペースを共有するため、固定サイズのギャップまたは固定サイズのトラックと組み合わせることができます。固定サイズの要素を持つコンポーネントと、残りのスペースを占有する 2 番目のトラックを設定するには、grid-template-columns: 200px 1fr のトラックリストとして使用できます。

小数単位に異なる値を使用すると、比例配分される空間が共有されます。値が大きいほど、スペアスペースが広くなります。以下のデモでは、3 つ目のトラックの値を変更します。

minmax() 関数

この関数を使用して、トラックの最小サイズと最大サイズを設定できます。 これは非常に便利です。 残りのスペースを分散する上記の fr ユニットの例では、minmax() を minmax(auto, 1fr) として使用して記述できます。グリッドは、コンテンツの固有のサイズを確認し、コンテンツに十分なスペースを確保してから、使用可能なスペースを分配します。つまり、グリッド コンテナで使用可能なすべてのスペースを均等に占めるトラックを取得できない可能性があります。

グリッド コンテナ内のスペースからギャップを差し引いたスペースをトラックに均等に割り当てるには、minmax を使用します。 トラックサイズである 1fr を minmax(0, 1fr) に置き換えます。これにより、トラックの最小サイズが 0 になり、最小コンテンツ サイズではありません。 その後、Grid はコンテナ内の利用可能なすべてのサイズを取得し、ギャップに必要なサイズを差し引いて、残りを fr 単位に従って共有します。

repeat() 表記

等しい列を持つ 12 列のトラック グリッドを作成する場合は、次の CSS を使用できます。

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

または、repeat() を使用してこれを書き出すこともできます。

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

repeat() 関数を使用すると、トラックリストの任意のセクションを繰り返すことができます。たとえば、トラックのパターンを繰り返すことができます。 通常のトラックや繰り返しセクションを含めることもできます。

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill、auto-fit

トラックのサイズ、minmax()、繰り返しについて学んだことをすべて組み合わせて、グリッド レイアウトで便利なパターンを作成できます。列のトラック数を指定せずに、コンテナに収まる数だけ作成する場合もあるでしょう。

そのためには、repeat() と、auto-fill キーワードまたは auto-fit キーワードを使用します。以下のデモでは、グリッドにより 200 ピクセルのトラックがコンテナに収まる数だけ作成されます。 新しいウィンドウでデモを開き、ビューポートのサイズを変えるとグリッドがどのように変化するかを確認します。

このデモでは、適切な数のトラックを使用します。 ただし、トラックには柔軟性がありません。 200 ピクセルのトラックを追加するのに十分なスペースが確保されるまで、端に空白が生じます。minmax() 関数を追加すると、最小サイズが 200 ピクセル、最大 1 fr の範囲で、収まる数だけトラックをリクエストできます。グリッドは 200 ピクセルのトラックをレイアウトし、余ったスペースはそれらに均等に分配されます。

これにより、メディアクエリを必要としない 2 次元のレスポンシブ レイアウトが作成されます。

auto-fill と auto-fit には微妙な違いがあります。次のデモでは、前述の構文を使用してグリッド レイアウトを操作しますが、グリッド コンテナにはグリッド アイテムが 2 つだけあります。auto-fill キーワードを使用すると、空のトラックが作成されていることを確認できます。キーワードを auto-fit に変更すると、トラックのサイズが 0 に縮小されます。 これは、フレキシブル トラックが成長してスペースを消費することを意味します。

それ以外の点では、auto-fill キーワードと auto-fit キーワードの挙動はまったく同じです。最初のトラックが入力されても、両者に違いはありません。

自動配置

これまでのデモで、グリッドの自動配置の動作を確認しました。アイテムは、ソースでの表示順にセルごとに 1 つずつグリッドに配置されます。 多くのレイアウトでは、これだけで十分です。さらに細かく調整したい場合は 2 つの方法があります 1 つ目は自動プレースメントの調整です

アイテムを列に配置する

グリッド レイアウトのデフォルトの動作では、行に沿ってアイテムが配置されます。 代わりに、grid-auto-flow: column を使用してアイテムを列に配置することもできます。行トラックを定義する必要があります。定義しないと、アイテムは固有の列トラックを作成し、すべてを 1 つの長い行にレイアウトします。

これらの値は、ドキュメントの書き込みモードに関連します。行は常に、ドキュメントまたはコンポーネントの書き込みモードで文が実行される方向に実行されます。次のデモでは、grid-auto-flow プロパティの値と writing-mode プロパティの値をモードを変更できます。

トラックのスパン

自動配置レイアウト内のアイテムの一部またはすべてが複数のトラックにまたがって表示されるようにすることもできます。grid-column-end または grid-row-end の値として、span キーワードと、展開する行数を使用します。

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

grid-column-start は指定していないため、auto の初期値が使用され、自動配置ルールに従って配置されます。省略形の grid-column を使用して同じことを指定することもできます。

.item {
    grid-column: auto / span 2;
}

隙間を埋める

複数のトラックにまたがるアイテムを含む自動配置レイアウトでは、一部のセルが塗りつぶされていないグリッドが表示されることがあります。完全に自動配置されるグリッド レイアウトのデフォルトの動作では、常に前進します。 アイテムは、ソース内の順序、または order プロパティの変更に従って配置されます。アイテムを収める十分なスペースがない場合、グリッドはギャップを残し、次のトラックに進みます。

次のデモでは、この動作について説明します。 このチェックボックスをオンにすると、高密度パッキング モードが適用されます。 この機能を有効にするには、grid-auto-flow の値を dense にします。この値を指定すると、グリッドはレイアウトの後半でアイテムを取得し、それらを使用してギャップを埋めます。ディスプレイが論理的な順序から切り離された可能性があります。

アイテムの配置

CSS グリッドにはすでに多くの機能が用意されています。では、作成したグリッド上にアイテムを配置する方法を見ていきましょう。

まず覚えておいていただきたいのは、CSS グリッド レイアウトは番号付きの線のグリッドに基づいています。グリッド上に配置する最も簡単な方法は、アイテムを行と行の間に配置します。このガイドでは、アイテムを配置する他の方法も説明しますが、これらの番号付きの行はいつでも確認できます。

項目を行番号で配置するために使用できるプロパティは次のとおりです。

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

これらの省略形を使用して、開始行と終了行の両方を同時に設定できます。

• grid-column
• grid-row

アイテムを配置するには、アイテムを配置するグリッド領域の開始線と終了線を設定します。

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Chrome DevTools では、行を視覚的にガイドしてアイテムが配置されている場所を確認できます。

行番号は、コンポーネントの書き込みモードと方向に従います。次のデモでは、文章の書き方や方向を変えて、項目の配置がテキストの流れとどのように整合するかを確認します。

積み上げられたアイテム

ラインベースの配置を使用すると、グリッドの同じセル内にアイテムを配置できます。 つまり、アイテムをスタックしたり、アイテムの一部が別のアイテムに重なったりします。ソース内で後続するアイテムは、先行するアイテムの上に表示されます。 この積み重ね順序は、配置されたアイテムの場合と同様に z-index を使用して変更できます。

負の行番号

grid-template-rows と grid-template-columns を使用してグリッドを作成すると、「明示的グリッド」が作成されます。これは、ユーザーが定義してトラックのサイズを指定したグリッドです。

この明示的なグリッドの外にアイテムが表示されることがあります。 たとえば、列トラックを定義してから、行トラックを定義せずにグリッド アイテムを複数行追加できます。デフォルトでは、トラックのサイズは自動的に調整されます。 また、定義された明示的なグリッドの外に grid-column-end を使用してアイテムを配置することもできます。どちらの場合も、グリッドはレイアウトを機能させるためのトラックを作成します。これらのトラックは「暗黙的グリッド」と呼ばれます。

ほとんどの場合、暗黙的または明示的なグリッドを使用していても違いはありません。 しかし、ラインベースの配置では、両者の主な違いに直面する可能性があります。

負の行番号を使用すると、明示的なグリッドの終了行からアイテムを配置できます。 これは、アイテムを最初から最後の列行まで広げる場合に便利です。 その場合は、grid-column: 1 / -1 を使用できます。アイテムは明示的なグリッドの右に引き伸ばされます。

ただし、これは明示的なグリッドでのみ機能します。自動配置のアイテムを 3 行並べて、最初のアイテムをグリッドの最後の行まで広げるレイアウトがあるとします。

そのアイテムを grid-row: 1 / -1 にすることもできます。以下のデモでは、これがうまくいかないことがわかります。トラックは暗黙的なグリッドに作成され、-1 を使用してグリッドの端に到達する方法はありません。

暗黙的トラックのサイズ設定

暗黙的グリッドで作成されたトラックは、デフォルトで自動的にサイズが変更されます。 ただし、行のサイズを制御する場合は、grid-auto-rows プロパティを使用し、列 grid-auto-columns を使用します。

最小サイズを 10em、最大サイズを auto にしてすべての暗黙的な行を作成するには:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

幅が 100 ピクセルと 200 ピクセルのトラックのパターンを持つ暗黙的な列を作成します。この場合、最初の列は 100px、2 番目の列は 200px、3 番目の列は 100px になります。

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

名前付きグリッド線

行に数字ではなく名前があれば、レイアウトにアイテムを簡単に配置できます。グリッド上の任意の線に名前を付けるには、任意の名前を角かっこで囲みます。 複数の名前を追加する場合は、同じ角かっこで囲んだスペースで区切ります。名前を付けた行は、番号の代わりに使用できます。

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

グリッド テンプレート領域

グリッドの領域に名前を付けたり、その名前付き領域にアイテムを配置したりすることもできます。 これは、CSS 内のコンポーネントがどのように表示されるかを確認できるため、便利な手法です。

まず、grid-area プロパティを使用して、グリッド コンテナの直接の子に名前を付けます。

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

キーワード auto と span 以外の任意の名前を指定できます。すべてのアイテムに名前を付けたら、grid-template-areas プロパティを使用して、各アイテムがまたがるグリッド セルを定義します。各行は引用符で囲まれて定義されます。

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

grid-template-areas を使用する際のルールがいくつかあります。

• 値は、空のセルを含まない完全なグリッドにする必要があります。
• トラックをスパンするには、名前を繰り返します。
• 名前を繰り返すことで作成される領域は長方形でなければならず、接続を切断することはできません。

上記のルールのいずれかに違反すると、値は無効として扱われ、破棄されます。

グリッド上に空白を残すには、. または倍数を使用します。間に空白はありません。 たとえば、グリッドの最初のセルを空のままにするには、一連の . 文字を追加します。

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

レイアウト全体が 1 か所で定義されているため、メディアクエリを使用して簡単にレイアウトを再定義できます。次の例では、grid-template-columns と grid-template-areas の値を再定義して 3 列に移動する 2 列レイアウトを作成しました。サンプルを新しいウィンドウで開き、ビューポート サイズを操作してレイアウトの変化を確認します。

また、他のグリッド メソッドと同様に、grid-template-areas プロパティが writing-mode や方向とどのように関連しているかも確認できます。

省略形プロパティ

2 つの短縮プロパティを使用して、多数のグリッド プロパティを一度に設定できます。 これらのプロパティをどのように組み合わせるかを詳しく見ていくと、少しわかりづらいかもしれませんが、長く使えるかどうかは、ご自身で決められます。

grid-template

grid-template プロパティは、grid-template-rows、grid-template-columns、grid-template-areas の省略形です。最初に、行が grid-template-areas の値とともに定義されます。列のサイズは / の後に追加されます。

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid 件の宿泊施設

grid 省略形は、grid-template 省略形とまったく同じ方法で使用できます。この形で使用すると、受け入れ可能な他のグリッド プロパティが初期値にリセットされます。 完全なセットは次のとおりです。

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

次の省略形を使用して、暗黙的なグリッドの動作を定義することもできます。次に例を示します。

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

アライメント

グリッド レイアウトでは、Flexbox のガイドで説明したものと同じ位置揃えプロパティを使用します。グリッドでは、justify- で始まるプロパティが、常にインライン軸（記述モードでの文の実行方向）で使用されます。

align- で始まるプロパティは、ブロック軸、つまり書き込みモードでブロックが配置される方向で使用されます。

• justify-content と align-content: グリッド コンテナ内のトラックの周囲またはトラック間に追加のスペースを分配します。
• justify-self と align-self: グリッド アイテムに適用され、配置先のグリッド領域内でアイテムを移動します。
• justify-items と align-items: アイテムの justify-self プロパティをすべて設定するためにグリッド コンテナに適用されます。

余分なスペースを分散させる

このデモのグリッドは、固定幅のトラックのレイアウトに必要なスペースよりも大きくなっています。 つまり、グリッドのインライン ディメンションとブロック ディメンションの両方にスペースがあるということです。align-content と justify-content を異なる値にして、トラックの動作を確認します。

space-between などの値を使用するとギャップが大きくなり、2 つのトラックにまたがるグリッド アイテムも大きくなって、ギャップに追加された追加のスペースを吸収することに注意してください。

コンテンツの移動

justify-self と align-self の初期値は stretch であるため、背景色の付いたアイテムは、配置されるグリッド領域を完全に埋めるように見えます。

このデモでは、justify-items と align-items の値を変更して、レイアウトがどのように変化するかを確認してください。グリッド領域のサイズは変更されず、代わりに、定義された領域内でアイテムが移動しています。

理解度チェック

電力網に関する知識をテストする

main {
  display: grid;
}

関連情報

このガイドでは、グリッド レイアウト仕様のさまざまな部分について概説しました。詳しくは、以下のリソースをご覧ください。

• MDN CSS グリッド レイアウト
• グリッドの詳細ガイド
• グリッド コンテナを作成する
• Chrome DevTools で CSS グリッドを調べる
• グリッド学習教材の包括的なコレクション