CSS グリッド: 寸法のキーワード

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

こんにちは。今日は、グリッド トラックのサイズを定義するのに役立つ、いくつかの特別な 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-widthの場合、これは画像またはテキスト全体です。両方のコンテンツ タイプが列内で垂直方向にどのように分離されているかに注目してください。この動作については、今後の記事で説明したいと思います。

キーワード自動

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

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

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

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

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

Observe que, no caso de text content, a auto grid track se comporta de forma diferente da min-content/max-content grid track. Quando auto é misturado com fr, a auto-track nunca força o text content a "wrap", a menos que a auto-track "fill" (preencha) todo o espaço disponível.

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

Obrigado por ler este pequeno artigo. Se quiser ler mais conteúdo como este, siga minha conta dev.to ou twitter. Além disso, sinta-se à vontade para me dar qualquer tipo de feedback. Eu adoraria ler seus comentários. Vejo você em breve no meu próximo artigo!

PS. Se quiser apoiar meu trabalho, ficarei grato por uma xícara de café. Obrigado. ❤️

Fonte

Artigo escrito por Mateusz Kirmuć.

以上がCSS グリッド: 寸法のキーワードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。