注: 以下のテキストを翻訳してここに投稿しました。参考文献はこの記事の最後にあります。

こんにちは。今日は、グリッド トラックのサイズを定義するのに役立つ、いくつかの特別な CSS グリッド キーワードについて話したいと思います。これらのキーワードを使用すると、必要なグリッド トラック サイズを正確に決定できます。じゃ、行こう。

この記事は CSS Grid シリーズの紹介の一部です。私の以前の投稿をチェックしたい場合は、ここで完全な目次を見つけることができます。

サイズ設定キーワードの紹介

CSS グリッドに関しては、トラックのサイズを決定するために使用できるキーワードは 3 つだけです。これらのキーワードは、auto、min-content、および max-content です。これらはすべて、CSS プロパティの Grid-template-colums および Grid-template-rows.

で使用できます。

最小コンテンツと最大コンテンツ

グリッド トラックのサイズをそのコンテンツに応じて変更する場合は、min-content または max-content の 2 つのキーワードのいずれかを使用する必要があります。 最小コンテンツ グリッド トラックは、コンテンツをオーバーフローさせずに最小サイズを維持しようとします。ただし、最大コンテンツ グリッド トラックは、拡張できる空き領域が無限であることを前提とし、コンテンツに理想的な幅を想定します。

上記のキーワードの違いを示す例をいくつか紹介します。各画像には 2 つのコンテナが含まれていることに注意してください。左側の min-content グリッド列 を持つコンテナと、右側の max-content グリッド列 を持つコンテナです。 ]

ここでわかるように、min-content 列と max-content 列の間にサイズの違いはありません。その理由は、画像には「デフォルトの固定サイズ」があり、変更するように明示的に指示しない限り変更されないためです。一方、テキストの内容は、状況に応じてそのサイズを「圧縮」する機能があります。この圧縮は、

テキストの折り返し (テキストの折り返し) を使用して行われます。つまり、単一の単語は折り返されません。これを知った上で、上の例の画像をテキストに置き換えてみましょう。

今回は列幅が異なります。列

min-content はテキスト コンテンツを強制的に「折り返す」のに対し、列 max-content はテキストの折り返しが必要ないほど拡張されます。列 min-content の幅は最長の単語と同じであり、列 max-content の幅はコンテナ自体よりも広くなっていることに注意してください。

列に複数のコンテンツ タイプが含まれている場合はどうなりますか?以下は、画像とテキストを含む列の例です。

どちらの場合も、最も幅の広い要素によって列のサイズが決まります。

min-content の場合、この要素は画像または最長の単語です。列 max-width の場合、これは画像またはテキスト全体です。両方のコンテンツ タイプが列内で垂直方向にどのように分離されているかに注目してください。この動作については、今後の記事で説明したいと思います。

キーワード自動

キーワード

auto は、前の 2 つの記事で説明したユニット fr に関連しています。同様に、グリッド トラックが指定された軸上のすべての利用可能なスペースを「埋める」必要があることを決定します。

。容器 { /** ... **/ グリッド テンプレート列: 自動 自動; }

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

ただし、auto キーワードと fr ユニットの間には 2 つの主な違いがあります。まず、キーワード

auto は単位ではないため、fr のように数値 (例: 2auto) と一緒に使用することはできません。第 2 に、キーワード auto は、ユニット fr を一緒に使用した場合、常にユニットに「負けます」。以下の例を参照してください。

。容器 { /** ... **/ グリッド テンプレート列: 自動 1fr; }

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

列 auto は、水平方向の列 fr と同じ量のスペースを「埋める」ことが期待できます。ただし、列 fr が存在すると、列のサイズが存在するコンテンツのサイズに自動的に「縮小」されます。

テキスト コンテンツの場合、

自動グリッド トラックは、最小コンテンツ/最大コンテンツ グリッド トラックとは動作が異なることに注意してください。 auto と fr を組み合わせた場合、auto-track は、自動トラックが利用可能なスペースをすべて「埋める」場合を除き、テキスト コンテンツを強制的に「折り返す」ことはありません。

。容器 { /** ... **/ 幅: 200ピクセル; グリッド テンプレート列: 自動 1fr; }

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

この短い記事をお読みいただきありがとうございます。このようなコンテンツをもっと読みたい場合は、私の dev.to または Twitter アカウントをフォローしてください。また、どんなご意見でもお気軽にお寄せください。ぜひコメントを読んでみたいと思います。また次の記事でお会いしましょう!

追伸。私の仕事をサポートしていただけるのであれば、コーヒー一杯でもよろしくお願いします。ありがとう。 ❤️

ソース

マテウシュ・キルムッチによって書かれた記事。