Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

グリッド

The CSS Podcast - 011: Grid

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

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

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

概要

グリッドでできることグリッドレイアウトには次の機能があります。これらの機能について、このガイドで詳しく説明します。

グリッドは行と列で定義できます。これらの行と列のトラックのサイズを指定することも、コンテンツのサイズに応じてサイズを変更することもできます。
グリッドコンテナの直接の子要素は、このグリッドに自動的に配置されます。
または、アイテムを正確な位置に配置することもできます。
グリッド上の線や領域に名前を付けると、プレースメントが容易になります。
グリッドコンテナ内の余分なスペースは、トラック間で分散できます。
グリッドアイテムは、その領域内で配置できます。

グリッドの用語

CSS に初めて本格的なレイアウトシステムが導入されたため、グリッドには新しい用語が多数含まれています。

グリッド線

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

行は 1 から始まり、コンポーネントの書き込みモードとスクリプトディレクションで番号が付けられます。つまり、英語などの左から右に記述する言語では列 1 行は左側に、アラビア語などの右から左に記述する言語では右側に配置されます。

グリッド線を示す図

グリッドトラック

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

グリッドトラックの図

グリッドセル

グリッドセルは、行トラックと列トラックの交差点で定義されるグリッド上の最小スペースです。テーブルのセルやスプレッドシートのセルと同じです。グリッドを定義してアイテムを配置しない場合、定義されたグリッドセルにアイテムが 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 要素の横にあるグリッドバッジを選択して、グリッドをハイライト表示します。[レイアウト] タブで、プルダウンから [行番号を表示] を選択して、グリッドに行番号を表示します。

キャプションと手順に記載されているとおりに — Chrome DevTools でハイライト表示されたグリッド。行番号、セル、トラックが表示されています。

組み込みサイズのキーワード

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

min-content
max-content
fit-content()

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

max-content キーワードは逆の効果があります。トラックの幅は、すべてのコンテンツが 1 つの長い連続した文字列で表示されるようになります。これにより、文字列が折り返されず、オーバーフローが発生する可能性があります。

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

次のデモでは、グリッドトラックのサイズを変更して、さまざまな組み込みサイズ設定キーワードを試します。

`fr` ユニット

既存の長さのディメンションとパーセンテージに加え、これらの新しいキーワードも使用できます。また、グリッドレイアウトでのみ機能する特別なサイズ設定方法もあります。これは fr 単位で、グリッドコンテナ内の使用可能なスペースの割合を表す柔軟な長さです。

fr 単位は、flexbox で flex: auto を使用する場合と同様の方法で動作します。アイテムのレイアウト後にスペースを分散します。したがって、3 つの列がすべて同じ割合で使用可能なスペースを取得するには、次のようにします。

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

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

fr 単位に異なる値を使用すると、スペースが比例して分割されます。値が大きいほど、空き容量が多く使用されます。以下のデモで、3 番目のトラックの値を変更します。

`minmax()` 関数

Browser Support

Source

この関数を使用すると、トラックの最小サイズと最大サイズを設定できます。これは非常に便利です。残りのスペースを分散する上記の fr ユニットの例では、minmax() を使用して minmax(auto, 1fr) と記述できます。グリッドはコンテンツの本質的なサイズを確認し、コンテンツに十分なスペースを割り当てた後、使用可能なスペースを分散します。つまり、グリッドコンテナで使用可能なすべてのスペースを各トラックが均等に分割できない場合があります。

グリッドコンテナ内のスペースをトラックが均等に占有するようにするには、minmax を使用します。トラックサイズの 1fr を minmax(0, 1fr) に置き換えます。これにより、トラックの最小サイズは min-content サイズではなく 0 になります。グリッドは、コンテナで使用可能なサイズをすべて取得し、ギャップに必要なサイズを差し引いて、残りのサイズを fr 単位に従って分割します。

`repeat()` 表記

Browser Support

Source

列が同じ 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 ピクセル、最大 1fr のトラックを必要な数だけリクエストできます。グリッドは 200 ピクセルのトラックをレイアウトし、残りのスペースをトラックに均等に分散します。

これにより、メディアクエリを使用せずに 2 次元のレスポンシブレイアウトが作成されます。

auto-fill と auto-fit には微妙な違いがあります。次のデモでは、上記の構文を使用してグリッドレイアウトを再生しますが、グリッドコンテナにグリッドアイテムを 2 つだけ配置します。auto-fill キーワードを使用すると、空のトラックが作成されていることがわかります。キーワードを auto-fit に変更すると、トラックは 0 サイズに圧縮されます。つまり、フレキシブルトラックが伸びてそのスペースを占有するようになります。

それ以外の場合、auto-fill キーワードと auto-fit キーワードはまったく同じ方法で動作します。最初のトラックが埋まると、両者の間に違いはありません。

自動プレースメント

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

アイテムを列に配置する

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

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

トラックの分割

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

.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 グリッドレイアウトは番号付きの行のグリッドに基づいていることを覚えておいてください。グリッドに配置する最も簡単な方法は、1 行から別の行に配置することです。このガイドでは、アイテムを配置する他の方法についても説明しますが、番号付きの行は常に使用できます。

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

開始行と終了行の両方を一度に設定できるショートカットがあります。

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

.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 行にわたって配置され、最初のアイテムがグリッドの最終行まで広がるようにします。

8 つの兄弟グリッドアイテムがあるサイドバー

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

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

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

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

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

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

.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 の値を再定義して、2 列のレイアウトを 3 列に変更しています。サンプルを新しいウィンドウで開き、ビューポートサイズを変更してレイアウトの変化を確認します。

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

省略形プロパティ

グリッドプロパティの多くを一度に設定できるショートカットプロパティが 2 つあります。これらのプロパティの組み合わせを正確に把握するまでは、少し混乱するかもしれません。ショートカットを使用するか、長い手順を使用するかは、ご自身で判断してください。

`grid-template`

Browser Support

Source

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` 件の宿泊施設

Browser Support

Source

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 であるため、配置されているグリッド領域全体を塗りつぶしているように表示されます。

注: アイテムが画像や固有のアスペクト比を持つものである場合、初期値は stretch ではなく start になります。これは、形が崩れるのを防ぐためです。

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

理解度を確認する

グリッドに関する知識をテストする

次のうち、CSS グリッドの用語はどれですか。

lines

グリッドは、水平方向と垂直方向に走るこれらのセパレータによって分割されます。

サークル

申し訳ございませんが、CSS グリッドには円の概念がありません。

細胞

行と列が交差する部分がグリッドセルになります。

地域

複数のセルを結合します。

列車

申し訳ございませんが、CSS グリッドにはトレインのコンセプトはありません。

ギャップ

セル間のスペース。

トラック

1 つの行または列がグリッド内のトラックです。

main {
  display: grid;
}

グリッドのデフォルトのレイアウト方向は何ですか？

行

列を定義しない場合、グリッドの子要素は通常どおりブロック方向に配置されます。

列

grid-auto-flow: column が存在する場合、グリッドは列としてレイアウトされます。

auto-fit と auto-fill の違いは何ですか？

auto-fit はセルを伸ばしてコンテナに収めるが、auto-fill は伸ばさない。

auto-fill は、引き伸ばしを行わずに、できるだけ多くのアイテムをテンプレートに配置します。Fit は、適合性を検証します。

auto-fit は、子に収まるようにコンテナを伸ばします。auto-fill は、子をコンテナに収まるようにします。

これらのプロパティはそうは動作しません。

min-content とは

0% と同じ

0% は親ボックスの相対値ですが、min-content はボックス内の単語と画像を基準としています。

最も小さい文字

最小の文字はありますが、min-content が参照しているのは文字ではありません。

最も長い単語または画像。

「CSS is awesome」というフレーズでは、awesome という単語が min-content になります。

max-content とは

最も長い文や最も大きな画像。

これは、ボックスのコンテンツで要求されている最大サイズ、または指定されている最大サイズです。文章の場合は最大幅、画像の場合は最大幅で表示されます。

最も長い文字。

最長の文字はありますが、max-content が参照しているのは文字ではありません。

最も長い単語。

最も長い単語は min-content です。

自動プレースメントとは

グリッドが子アイテムを受け取り、ブラウザのヒューリスティクスに基づいて最適な順序で配置します。

コンテンツの順序を変更するのはブラウザではなく、独自のスタイルのみです。

グリッドの子アイテムに grid-area が割り当てられ、そのセルに配置されている場合。

これは自動プレースメントではなく、明示的なプレースメントです。

未割り当てのグリッド項目がレイアウトテンプレートの次に配置されている場合。

明示的な領域のないグリッドアイテムは、使用可能な次のグリッドセルに配置されます。

リソース

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

グリッド

The CSS Podcast - 011: Grid

概要

グリッドの用語

グリッド線

グリッド トラック

グリッドセル

グリッド領域

ギャップ

グリッド コンテナ

グリッド アイテム

行と列

組み込みサイズのキーワード

fr ユニット

minmax() 関数

repeat() 表記

auto-fill、auto-fit

自動プレースメント

アイテムを列に配置する

トラックの分割

ギャップを埋める

アイテムの配置

アイテムの重ね付け

負の行番号

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

名前付きグリッド線

グリッド テンプレートのエリア

省略形プロパティ

grid-template

grid 件の宿泊施設

配置

余分なスペースの分配

コンテンツの移動

理解度を確認する

リソース

グリッドトラック

グリッドコンテナ

グリッドアイテム

`fr` ユニット

`minmax()` 関数

`repeat()` 表記

`auto-fill`、`auto-fit`

グリッドテンプレートのエリア

`grid-template`

`grid` 件の宿泊施設