CSSグリッドリピート（）関数の使用方法-CSSチュートリアル-php.cn

CSSグリッドリピート（）関数の使用方法

この記事では、CSSグリッドリピート（）関数のすべての可能性を調査します。これにより、グリッド列と行のパターンを効率的に作成し、メディアクエリなしで応答性のあるレイアウトを作成できます。

キーテイクアウト

`repeat（）`関数はグリッドパターンの作成を簡素化し、列または行の数とそのサイズを簡潔に指定し、コードの読みやすさと効率を向上させます。

関数は「自動フィット」および「自動フィル」キーワードと統合して、コンテナの幅に基づいてグリッドトラックの数を自動的に調整できます。
指名された線は、 `repeat（）`内で定義できます。グリッドアイテムの正確な配置を支援し、グリッド構造の保守性を向上させることができます。
代わりに、

上記の例では、Repeat（）関数により、必要な列（5）の数と、すべてのサイズ（1FR - または使用可能なスペースの1つの割合）を指定できます。

これにより、コードがより効率的かつ読みやすくなります。そして、これは単なる簡単な例です。以下に示すように、Repeat（）関数でできることはもっとあります。

次のペンは、上記のコードの簡単なデモを示しています。 10個のdivを含む記事は、5つの列に編成されています。

ペンを参照してください CSSグリッドリピート（）：SitePointによる5つの簡単な列（@SitePoint） Codepenで。

上記のデモでは、CSSギャッププロパティを使用しています。グリッドレイアウトの詳細については、CSSグリッドの初心者向けガイドをご覧ください。 Repeat（）関数のオプション

repeat（）の括弧内で実際にかなり多くのことができます。コンマで区切られた2つの議論が必要です。 1つ目は「カウント」を表し、2番目は「トラック」を表します：繰り返し（、）。（「トラック」という言葉は、列または行の一般的な名前です。）

カウント引数は、3つのことの1つになります：

数（1、2、3など）

明らかに、数値が特定の数のトラックを設定します。ただし、自動フィットと自動充填により、利用可能なスペースに応じてさまざまな数のトラックが可能になります。これにより、メディアクエリのないレスポンシブレイアウトに非常に便利になります。以下で詳しく説明します

FR、PX、EM、％、CH

などのユニットを使用して、

長さの値

minコンテンツキーワード

最大コンテンツキーワード
Autoキーワード
minmax（）関数。それ自体がネストされたmin（）またはmax（）関数を持つことができます
fit-content（）関数
名前の名前
repeat（）

repeat（）で使用できるさまざまな引数を調査する前に、repeat（）を使用して列のパターンを作成できることに注意する価値があります。たとえば、

6列グリッドのこの「ロングハンド」コードを検討してください。

repeat（）：

を使用して、これを書き直すことができます

これにより、ブラウザがパターンを3回繰り返すことをブラウザに指示します。1Fr幅の列1Fの後、幅2Frの列が続きます。以下のデモは、これを動作していることを示しています。

ペンを参照してください CSSグリッドリピート（）：SitePointによる列パターン（@SitePoint） Codepenで。

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

ログイン後にコピー

repeat（）

で長さの値を使用します

<span>grid-template-columns: repeat(5, 1fr);
</span>

ログイン後にコピー

repeat（）で使用される長さ1FRの長さの値が既に見られました。 FRユニットの利点は、利用可能なスペースに応じてサイズを追跡することです。ただし、必要な他の長さユニットを使用することもできます。

たとえば、

3つの列トラックを設定して、120ピクセルの幅を与えましょう。

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

ログイン後にコピー

次のCodepenデモには、結果が表示されます。

ペンを参照してください CSSグリッドリピート（）：SitePointによる長さの値（@SitePoint） Codepenで。

列の固定幅は、容器が狭すぎても変更されません。上記のペンのブラウザ幅で遊んでみてください。また、5EM、10CH、15％などの他の長さのユニットにピクセルを交換して、それらの効果を確認してみてください。

repeat（）

を使用して最小コンテンツキーワードを使用します

Minコンテンツキーワードは、最小コンテンツと同じ幅または高さのみにトラックを設定します。以下のデモには、3つの列があり、それぞれが最小コンテンツに設定されているため、各列は最長の単語が含まれているのと同じくらい広いです。

ペンを参照してください CSSグリッドリピート（）：SitePointによるMin-Content（@SitePoint） Codepenで。

<span>grid-template-columns: repeat(5, 1fr);
</span>

ログイン後にコピー

repeat（）で最大コンテンツキーワードを使用します

Max-Contentキーワードは基本的にMin Contentの反対を行います。グリッドセル内の最大量のコンテンツにトラックサイズを基にしています。以下のデモでは、列の幅は、最大量のコンテンツを持つセルに基づいています。

ペンを参照してください CSSグリッドリピート（）：SitePointによるMax-Content（@SitePoint） Codepenで。

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

ログイン後にコピー

repeat（）

で自動キーワードを使用します repeat（）で使用すると、AutoキーワードはMax Contentで最大になり、Min ContentでMinsが出ます。

列の次のパターンを検討してください：

ここには、6つの列があります。各列には、オートの幅に奇数の1つのセットがあります。以下のCodepenデモでは、十分なスペースがある場合、最大コンテンツで「自動」テキストが最大になり、1FR Divsが残りのスペースを共有していることがわかります。ブラウザが狭くなると、自動列が最小コンテンツのしきい値に達するまで狭くなり続けます。

ペンを参照してください CSSグリッドリピート（）：SitePointによる自動（@SitePoint） Codepenで。

<span>article {
</span>  <span>grid-template-columns: repeat(3, 1fr 2fr);
</span><span>}
</span>

ログイン後にコピー

上記のデモでは、各列が最小コンテンツのしきい値に達したら、Divsはコンテナのオーバーフローを開始します。（つまり、テキストはこれ以上包むことはできません。）

注：Autoは、他の値と混合した場合に上記のように振る舞うようです。それだけで - 繰り返し（3、auto）など - 繰り返しを設定しているように動作します（3、1fr）。 minmax（）関数を使用してrepeat（）を使用します

minmax（）関数は、コンマで区切られた最小値と最大値の2つの引数を使用します。したがって、minmax（）を使用すると、柔軟な環境でトラックに可能なサイズの範囲を設定できます。たとえば、

列をminmax（40px、100px）に設定できます。つまり、最小幅は40pxで、最大幅は100pxです。 minmax（）の両方の引数は、FR、PX、EM、％、CHなどの長さの値を取ることができます。ただし、キーワードは両方の引数として機能することは想定されていないため、少なくとも1つの引数に長さの値を使用するのが最善です（ただし、これはMinmax（Min Content、Max Content）などの機能が発生することがありますが）。

次のコードは5つの列を設定します。

ペンを参照してください css grid repeat（）：minmax（）by sitepoint（@sitepoint） Codepenで。

これは、最小幅の60pxに達するまでうまく機能します。その時点以降、コンテンツはコンテナからたむろし始めます。すぐにより良い結果を得る方法が見られます。

min（）またはmax（）

でminmax（）関数を使用します

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

ログイン後にコピー

minmax（）関数は、引数としてmin（）またはmax（）関数のいずれかを持つこともできます。これらは両方とも2つの値を取ります。 min（）関数は、その2つの値のうち小さい方を適用し、max（）関数はより大きな値のいずれかを適用します。これは、レスポンシブ環境で役立ちます。

たとえば：

ペンを参照してください css grid repeat（）：minmax（）with min（）by sitepoint（@sitepoint）with min（）function Codepenで。

上記のコードは5つの列を設定します。幅広いブラウザでは、5つの列がすべて1FRで等しく間隔が取られます。狭いデバイスでは、列が狭くなり狭くなります。 60pxと8VWの低い方にヒットすると、縮小を停止します。そのため、狭い画面でコンテナからぶら下がっているコンテンツで自分自身を見つけることができます。さらに完全に応答するようになることがさらにあります。

minmax（）、min（）、およびmax（）の組み合わせをこの段階で少し圧倒している場合は、自動フィットとオートに会ったときに本当の力が見られるので、そこに垂れ下がっています。塗りつぶし。

repeat（）

を使用してfit-content（）関数を使用します

Fit-Content（）関数は、トラックが成長できる最大サイズを表す単一の引数を取ります。したがって、トラックはその時点まで柔軟になります。 FIT-CONTENT（）は、FR、PX、EM、％、Ch。などの長さの値を取得できます。たとえば、3つの列とフィットコンテンツ（120px）を設定すると、列の幅は120pxの幅が並ぶまで応答します。

ペンを参照してください css grid repeat（）：fit-content（）by sitepoint（@sitepoint） Codepenで。

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

ログイン後にコピー

repeat（）

を使用して名前付きの行を使用しますグリッドレイアウトでは、トラックの周りの垂直および水平線にデフォルトで番号が付けられています。 Grid-Template-ColumnsとGrid-Template-rowsを設定すると、それらの行に名前を付けることができます。これにより、グリッドにコンテンツを配置するときにこれらの行をターゲットにしやすくなります（入り込んでグリッドラインをカウントする必要はありません）。

簡単な例です。名前付きの行は、四角い括弧内のビットです（[]）：

上記のコードは2つの列を提供します。左端の垂直グリッドライン（番号1）は「サイドバー」と呼ばれ、中央のグリッドライン（番号2）は「コンテンツスタート」と呼ばれ、最終グリッドライン（3）は「コンテンツエンド」と呼ばれます。

repeat（）関数内で名前付き行を使用することもできます：

<span>grid-template-columns: repeat(5, 1fr);
</span>

ログイン後にコピー

これは、私たちの列のそれぞれが左にyinと呼ばれる線と右にヤンと呼ばれる線があることを意味します。

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

ログイン後にコピー

各行が同じ名前を持っている場合、人生をより困難にするように思えるかもしれませんが、個別にターゲットにすることができます。たとえば、

グリッドコラムで最初の陰線をターゲットにすることができます：yin CSSグリッドリピート（）関数の使用方法

グリッドコラムで2番目の陰線をターゲットにすることができます：yin 2

2番目のYinラインから3行にまたがる列を設定できます。グリッドコラム：yin 2 /スパン3

グリッドコラムで2番目の陰から端までスパンする列を設定できます。
repeat（）内の命名線は、繰り返し（）が他の値と混合される場合、おそらく最も便利です。

auto-fitおよびauto-fillを使用してrepeat（）を使用します

Auto-FitおよびAuto-Fillキーワードは、固定数のトラックを設定することに代わるものです。彼らは、ブラウザに特定のスペースにできるだけ多くのトラックを適合させるように指示します。たとえば、

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

ログイン後にコピー

ペンを参照してください CSSグリッドリピート（）：SitePointによるオートフィットと自動充填（@SitePoint） Codepenで。

上記のデモでは、divは150pxの幅に設定されており、あるラインに収まらないものは次の行にドロップします。オートフィットをオートフィルに変更しても、違いは見られません。これらの条件下では、両方とも同じことをするからです。それらの違いは、特別な状況でのみ明らかになります。

この時点で、自動充填に自動フィットしているのは

OK auto-fit/auto-fill、minmax（）およびmin（）を使用してrepeat（）を使用します repeat（）にまだ恋をしていない場合、repeat（）とauto-fit、minmax（）とmin（）の組み合わせは、きっとキューピッドの矢印が頑固な心を突き刺します。それらの組み合わせにより、メディアクエリを使用せずに真にレスポンシブなレイアウトを作成できます。 repeat（）

を使用してauto-fitおよびminmax（）を使用します

次のCSSを検討してください：

この例では、minmax（）は最小列幅の200pxと最大1FRを設定します。以下のデモは、これを動作していることを示しています。

ペンを参照してください css grid repeat（）：auto-fit and minmax（）by sitepoint（@sitepoint） Codepenで。

<span>grid-template-columns: repeat(5, 1fr);
</span>

ログイン後にコピー

各divは幅が少なくとも200pxでなければなりません。右側に余分なスペース（200ピクセル以下）がある場合、divは拡張してスペースを埋めます。ブラウザを広げると、別のdivが行に追加されます。同じことが逆に起こります。ブラウザを絞ると、列の最後のDIVが少なくとも200pxのスペースが収まるようになるとドロップされます。そして、それが落とすと、残りのdivが展開して列を埋めます。

繰り返しますが、オートフィットをオートフィルに交換すると、同じ動作が表示されます。ただし、この例には1つの制限があります。ブラウザウィンドウを十分に狭くすると、1つの列が表示されます。その列が200pxより狭くなると、Divはコンテナのオーバーフローを開始します。

このオーバーフローがミックス（）をミックスに入れることで発生するのを防ぐことができるので、次のことを見てみましょう。

auto-fit、minmax（）、min（）を使用してrepeat（）

を使用します

min（）を導入することにより、小さな幅で何が起こるかを制御できます。このように見えるようにコードを更新しましょう：

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

ログイン後にコピー

最小列幅には2つのオプションがあります。ブラウザはを選択します。列が200pxよりも狭くなると、100％が値が小さいため、勝ちます。これは、残りの1つの列が幅100％に設定されるようになることを意味します。そのため、幅が減少しているときにコンテナにうまく収まり続けます。（実際にこれを見るために、できる限りブラウザウィンドウを絞ります。）ペンを参照してください css grid repeat（）：minmax（）and min（）by sitepoint（@sitepoint） Codepenで。

auto-fit、minmax（）およびmin（）を使用してrepeat（）を使用するより現実的なデモについては、レスポンシブイメージギャラリーの次のCodepenデモをご覧ください。このデモでは、CSSアスペクト比の使用方法についてカバーしたアスペクト比プロパティも使用しています。

ペンを参照してください SitePointによるアスペクト比を使用したレスポンシブイメージギャラリー（@SitePoint） Codepenで。

自動フィットとオートフィルの違いを理解

これまで見てきた例では、オートフィットとオートフィルの間に違いはまったくないようです。違いは特定の状況でのみ表示されますが、これについては簡単に説明します。

デモHTMLを削除して、DIVが4つしかないようにし、次のCSSを設定します。

下の画像は、自動充填で得られるものを示しています

<span>grid-template-columns: repeat(5, 1fr);
</span>

ログイン後にコピー

ブラウザは、コンテナに収まる

自動フィットに切り替えましょう：

以下の画像は、自動フィットで得られるものを示しています。

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

ログイン後にコピー

Auto-Fitを使用すると、ブラウザはより多くのDIVのスペースも計算しますが、そのスペースを幅ゼロ幅に崩壊させ、既存のDIVを拡張してすべてのスペースを占有します。上の画像では、エンド列の線にまだ番号が付けられていることがわかります。8はグリッドライン7、6、5の上に積み重ねられています。

それで、私たちはこのすべてを何を作るのでしょうか？現実的には、すべてではないにしても、ほとんどの状況では、コンテンツに使用できるときにスペースを空にしておくことを望んでいないため、自動フィットを使用したいと思うでしょう。

このCodepenデモで自動フィットと自動充填を楽しむことができます。オートフィットをオートフィルに変更して、ブラウザを広げて契約して、両方がどのように振る舞うかを確認してください。

repeat（）

について知っておくべき便利なこと上記のように、

繰り返し（）関数は、グリッドテンプレートコラムとグリッドテンプレート列を使用した長い宣言の一部として使用できます。ここで出会ったほとんどの友人 - 長さのユニット、最小コンテンツ、最大コンテンツ、オート、minmax（）、fit-content（）、および名前のライン - は、repeat（）とその内部と一緒に動作します。（MDNのグリッドテンプレートコラムとグリッドテンプレートの列を使用して作業している例を見ることができます。）

トラック引数にはいくつかの組み合わせが許可されていません。たとえば、Repeat（Auto-Fill、1FR）のようなものを使用することはできません。 Minmax（100PX、1FR）など、どこかに固定された測定が必要なため、自動フィットと柔軟なユニットが一緒にプレイできません。

見たように、minmax（）関数にはネストされたmin（）またはmax（）関数のいずれかを持つことができます。また、2つではありませんが、2つではありません。たとえば、Minmax（50px、max-content）を使用できますが、minmax（min-content、max-content）ではありません（正直なところ、これらの組み合わせのいくつかは

とにかく動作しているようです）。 repeat（）表記はネストできません。したがって、繰り返し（）内に繰り返し（）を持つことはできません。しかし、繰り返し（5、1FR）100pxリピート（2、50px）など、繰り返し（）関数を並べて繰り返すことができます。

ラッピング

Repeat（）関数は、グリッド列と行の繰り返しパターンを効率的にレイアウトするための非常に便利なツールです。単一のコードでメディアクエリなしで完全にレスポンシブなレイアウトを作成するために使用できます。

ほとんどの場合、繰り返し（）で雑草に近づきすぎる必要はありません。その最も印象的な機能は、次のような基本的な例にまとめられています：

非常に便利になるので、そのコードのラインをバックポケットに必ず保管してください。

繰り返し（）関数の詳細については、

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

ログイン後にコピー

をご覧ください

mdn

の繰り返し（）ページ

W3Cグリッドレイアウトモジュール仕様の繰り返し（）セクション

に関するよくある質問（FAQ）

minmax関数で繰り返し関数を使用できますか？

はい、繰り返し関数はminmax関数で使用できます。 MinMax関数は、最小値以上のサイズ範囲を定義し、最大値以下を定義します。たとえば、「Grid-Template-Columns：Repeat（3、Minmax（100px、1FR））;」それぞれが100pxの最小幅と最大幅1FRを持つ3つの列を持つグリッドを作成します。負の数の繰り返し関数、ブラウザはルールを無視し、グリッドは作成されません。繰り返し関数は、繰り返しの数として正の整数のみを受け入れます。

パーセンテージ値を持つ繰り返し関数を使用できますか？パーセンテージは、グリッドコンテナのサイズに関して計算されます。たとえば、「Grid-Template-Columns：Repeat（2、50％）;」コンテナの幅の半分を占める2つの列を持つグリッドを作成します。

Grid-Template-rowsプロパティでリピート関数を使用できますか？グリッドテンプレート列プロパティとともに使用して、グリッド行のサイズを定義します。構文は、Grid-Template-Columnsと同じです。たとえば、「グリッドテンプレート列：繰り返し（3、100px）;」高さ100pxそれぞれ3列のグリッドを作成します。