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

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

グリッド

CSS ポッドキャスト - 011: グリッド

ウェブデザインで非常に一般的なレイアウトは、ヘッダー、サイドバー、本文、フッターのレイアウトです。

長年にわたり、このレイアウトを解決する方法は多数ありますが、 CSS グリッドを使うと比較的単純であるだけでなく、選択肢はたくさんありますグリッドは、コントロールを本来のサイジングには柔軟性がありこの種のレイアウトに最適です。これは、グリッドが 2 次元コンテンツ用に設計されたレイアウトメソッドであるためです。つまり、行と列に同時に配置されます。

グリッドレイアウトを作成する際は、行と列からなるグリッドを定義します。次にそのグリッドにアイテムを配置し作成したセルに自動的に配置されるようにすることもできます。グリッドやネットワークの利用可能なリソースの概要をグリッドレイアウトもすぐに作成できます

概要

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

グリッドは行と列で定義できます。これらの行と列のトラックのサイズ設定を選択することも、コンテンツのサイズに応じて変更することもできます。
グリッドコンテナの直接の子が、このグリッドに自動的に配置されます。
または、正確な場所にアイテムを配置することもできます。
グリッド上のラインや領域に名前を付けると、配置しやすくなります。
グリッドコンテナの予備スペースはトラック間で分配できます。
グリッドアイテムは領域内で配置できます。

グリッドの用語

CSS が本格的なレイアウトシステムを使用するのは初めてであるため、グリッドには多くの新しい用語が使われています。

グリッド線

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

行には番号が振られます。コンポーネントの記述モードとスクリプトの方向に従って番号を付けます。つまり、列 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 つは自動です Auto のサイズをトラックとして使用した場合は、コンテンツと同じ大きさであると考えることができます。トラックはデフォルトで自動的に調整されます。

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

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

Chrome でデモを開きます。 ID が container の灰色の背景の要素を調べます。 DOM の .container 要素の横にあるグリッドバッジを選択して、グリッドをハイライト表示します。 [レイアウト]タブではプルダウンで [Display Line Numbers] を選択して、グリッドに行番号を表示します。

字幕と手順に記載されている — </ph> Chrome DevTools でグリッドがハイライト表示され、行番号、セル、トラックが表示されている。

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

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

min-content
max-content
fit-content()

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

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

fit-content() 最初は max-content のように動作します。ただし、トラックが関数に渡したサイズに達すると、コンテンツのラップが開始します。そのため、fit-content(10em) は 10em 未満のトラックを作成します。 max-content のサイズが 10em 未満の場合、 10em 以下にしてください

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

で確認できます。

`fr` ユニット

既存の長さのディメンション、割合、およびこれらの新しいキーワードがあります。グリッドレイアウトでのみ機能する特別なサイズ設定メソッドもあります。これは fr 単位です。柔軟な長さ。グリッドコンテナで使用可能なスペースのシェアを表します。

fr 単位は、Flexbox で flex: auto を使用する場合と同様に機能します。アイテムが配置された後にスペースを割り当てます。したがって、3 つの列すべてに同じスペースの空き領域を割り当てる必要があります。

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

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

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

`minmax()` 関数

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

この関数では、トラックの最小サイズと最大サイズを設定できます。これは非常に便利です。上記の fr ユニットの例で、残りのスペースを配分するとします。次のように記述できます。 minmax() を minmax(auto, 1fr) として使用。グリッドはコンテンツの本質的なサイズに注目し、コンテンツに十分なスペースを確保したうえで、利用可能なスペースを割り当てます。そのため、それぞれのトラックが均等に分配されるとは限りません。グリッドコンテナ内のすべてのスペースの全体を表示したりできます

グリッドコンテナ内のスペースからギャップを差し引いたものをトラックが強制的に利用するには、minmax を使用します。トラックサイズとして 1fr を minmax(0, 1fr) に置き換えます。これにより、最小コンテンツサイズではなく、トラック 0 の最小サイズになります。グリッドはコンテナ内の利用可能なサイズをすべて占有し、ギャップがあればそのサイズを差し引き残りはフランスの単位に従って分配します

`repeat()` 表記

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

同じ列を持つ 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);
}

または、gcloud コマンドを使用して 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 つずつグリッドに配置されます。多くのレイアウトでは、これだけで十分かもしれません。より細かい制御が必要な場合は、次の方法をお試しください。 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 グリッドレイアウトは番号付きの線のグリッドに基づいているということです。グリッドに配置する最も簡単な方法は、ある行から別の行に配置することです。アイテムを配置する他の方法については、このガイドに記載の番号の付いた行にはいつでもアクセスできます

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

これらの行には、開始行と終了行を一度に設定するための省略形があります。

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

.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 ピクセルのトラックのパターンで暗黙的な列を作成するため。最初の暗黙の列は 100px になります 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 か所で定義するため、メディアクエリを使用して簡単にレイアウトを再定義できます。次の例では、3 つの列に移動する 2 列のレイアウトを作成しました grid-template-columns と grid-template-areas の値を再定義します。新しいウィンドウでサンプルを開き、ビューポートのサイズを試し、レイアウトの変化を確認します。

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

省略形のプロパティ

2 つの省略形プロパティを使用すると、グリッドのプロパティの多くをまとめて設定できます。これらがどのように組み合わされているのかを詳しく分析するまでは、少しわかりにくいかもしれません。これらを使用するかどうかは、任意です。

`grid-template`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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 行または 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」（CSS は素晴らしい）というフレーズの場合、素晴らしい言葉は min-content になります。

max-content とは何ですか？

文が最も長い、または最も大きな画像。

これは、ボックスのコンテンツが要求している、または指定した最大サイズです。最も幅の広い文か、最も広い画像です。

最も長い文字。

最も長い文字はありますが、max-content が指すのは文字ではありません。

最も長い単語。

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

自動プレースメントとは

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

ブラウザでコンテンツの順序が変わることはなく、同じスタイルが反映されるのもその点です。

グリッドの子アイテムに grid-area が設定され、そのセルに配置された場合。

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

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

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

リソース

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

グリッド

CSS ポッドキャスト - 011: グリッド

概要

グリッドの用語

グリッド線

グリッド トラック

グリッドセル

グリッド領域

ギャップ

グリッド コンテナ

グリッド アイテム

行と列

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

fr ユニット

minmax() 関数

repeat() 表記

auto-fill、auto-fit

自動配置

アイテムを列に配置する

スパン トラック

ギャップを埋める

アイテムを配置する

アイテムの積み重ね

負の行番号

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

名前付きのグリッド線

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

省略形のプロパティ

grid-template

grid 件の宿泊施設

配置

余分なスペースの配分

コンテンツの移動

理解度をチェックする

リソース

グリッドトラック

グリッドコンテナ

グリッドアイテム

`fr` ユニット

`minmax()` 関数

`repeat()` 表記

`auto-fill`、`auto-fit`

スパントラック

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

`grid-template`

`grid` 件の宿泊施設