html - CSS グリッドのラッピング

Question

メディア クエリを使用せずに 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それは素晴らしいことです。子供たちが自分の幅を指定することをお勧めします。

Answer 1

表記の最初の引数としてまたは のいずれauto-fillかを使用します。auto-fitrepeat()

<auto-repeat>表記の変形repeat():

repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

---

auto-fill

がauto-fill繰り返し数として指定されている場合、グリッド コンテナが関連する軸に明確なサイズまたは最大サイズを持っている場合、繰り返し数は、グリッドがそのグリッド コンテナをオーバーフローさせない最大の正の整数です。

^{https://www.w3.org/TR/css-grid-1/#valdef-repeat-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後に空の繰り返しトラックが折りたたまれる点が異なります。

^{https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fit}

.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

この 2 つの違いは、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>

---

遊び場：

コードペン

オートフィル トラックの検査

---

自動フィット トラックの検査

Answer 2

auto-fitまたは関数auto-fill内のいずれかが必要です。repeat()

grid-template-columns: repeat(auto-fit, 186px);

minmax()柔軟な列サイズを許可するためにa も使用すると、2 つの違いが明らかになります。

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

これにより、186 ピクセルからコンテナーの全幅に広がる等幅の列まで、列のサイズを変更できます。auto-fill幅に収まる数の列を作成します。たとえば、グリッド項目が 4 つしかない場合でも、5 つの列が収まる場合、5 番目の空の列があります。

代わりに使用auto-fitすると、空の列が防止され、必要に応じてさらに拡張されます。

Answer 3

あなたは探しているかもしれませんauto-fill：

grid-template-columns: repeat(auto-fill, 186px);

デモ: http://codepen.io/alanbuchanan/pen/wJRMox

使用可能なスペースをより効率的に使用するには、 を使用して、2 番目の引数としてminmax渡します。auto

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

デモ: http://codepen.io/alanbuchanan/pen/jBXWLR

空の列が必要ない場合は、auto-fit代わりにauto-fill.