メディアクエリを使用せずに CSS グリッドラップを作成することは可能ですか?
私の場合、グリッドに配置したいアイテムの数が不確定で、そのグリッドを折り返したいのですが、Flexbox を使用すると、確実に適切な間隔で配置することができません。メディア クエリの大量使用も避けたいです。
こちらはサンプルコード:
.grid {
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
grid-template-columns: 186px 186px 186px 186px;
}
.grid > * {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>以下は GIF 画像です:
補足ですが、私が行っているように、すべての項目の幅を指定せずに済む方法を教えていただけるとgrid-template-columnsありがたいです。子要素に独自の幅を指定させたいです。
ベストアンサー1
どちらかを使用するauto-fillまたはauto-fit最初の引数としてrepeat()表記。
<auto-repeat>表記の変形repeat():
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
auto-fill
繰り返し回数として指定されている場合
auto-fill、グリッドコンテナに明確な関連する軸のサイズまたは最大サイズの場合、繰り返し回数はグリッドがグリッド コンテナーをオーバーフローしない最大の正の整数になります。
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>グリッドは、コンテナーをオーバーフローすることなく、可能な限り多くのトラックを繰り返します。
この場合、上記の例(画像を参照)では、オーバーフローせずにグリッド コンテナーに収まるトラックは 5 つだけです。グリッドには 4 つの項目しかないため、残りのスペース内に空のトラックとして 5 つ目の項目が作成されます。
残りのスペース、トラック #6 で明示的なグリッドが終了します。これは、別のトラックを配置するのに十分なスペースがなかったことを意味します。
auto-fit
キーワード
auto-fitは と同じように動作しますauto-fillが、グリッドアイテムの配置空の繰り返しトラックは折りたたまれます。
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>グリッドはコンテナーをオーバーフローすることなく可能な限り多くのトラックを繰り返しますが、空のトラックは に折りたたまれます0。
折りたたまれたトラックは、固定トラック サイズ設定機能を持つものとして扱われます0px。
画像の例とは異なりauto-fill、空の 5 番目のトラックは折りたたまれており、明示的なグリッドは 4 番目の項目の直後で終了します。
auto-fill対auto-fit
両者の違いは、minmax()機能が使用されます。
minmax(186px, 1fr)アイテムの範囲を186px～にするには、グリッドコンテナ内の残りのスペースの割合。
を使用するとauto-fill、空のトラックを配置するスペースがなくなるとアイテムが大きくなります。
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>を使用するとauto-fit、すべての空のトラックが に折りたたまれるため、アイテムは残りのスペースを埋めるために大きくなります0px。
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>遊び場：
コードペン
自動入力トラックの検査
自動調整トラックの検査
