CSS网格包装？ [英] CSS Grid wrapping?

问题描述

是否可以在不使用媒体查询的情况下进行CSS网格换行？

在我的情况中，我有一个非确定性数量的项目，网格，我想要网格来包装。使用flexbox，我无法可靠地将事情分开。我也想避免一堆媒体查询。

这里是

作为一个侧面说明，如果任何人都可以告诉我如何避免指定所有项目的宽度，比如我使用 grid-template-columns ，那会很好。我希望孩子们指定他们自己的宽度。 使用

在这种情况下，给定上面的示例（请参阅图像），只有5个轨道可以适合网格容器而不会溢出。我们的网格中只有4个项目，所以第五个项目在剩余空间内创建为空轨道。

剩余空间的其余部分（轨道＃6）结束显式网格。这意味着没有足够的空间放置另一首曲目。 $ b c $ c
$ b $ auto-fit 关键字的行为与自动填充相同，除了

不像自动填充 image image，空的第五个轨道被折叠，在第四个项目之后结束显式网格。

---

auto-fill vs auto-fit

当

Is it possible to make CSS grid wrap without using media queries?

In my case, I have a non-deterministic number of items that I want placed in a grid and I want that grid to wrap. Using flexbox, I'm unable to reliably space things nicely. I'd like to avoid a bunch of media queries too.

Here's some sample code:

.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>

And here's a gif:

As a side-note, if anyone can tell me how I could avoid specifying the width of all the items like I am with grid-template-columns that would be great. I'd prefer the children to specify their own width.

解决方案

Use either auto-fill or auto-fit as the repetition number of the repeat() notation.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

---

auto-fill

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

.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>

The grid will repeat as many tracks as possible without overflowing its container.

In this case, given the example above (see image), only 5 tracks can fit the grid-container without overflowing. There are only 4 items in our grid, so a fifth one is created as an empty track within the remaining space.

The rest of the remaining space, track #6, ends the explicit grid. This means there was not enough space to place another track.

---

auto-fit

The auto-fit keyword behaves the same as auto-fill, except that after grid item placement algorithm any empty tracks within the remaining space will be collapsed to 0.

.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>

The grid will still repeat as many tracks as possible without overflowing its container, but the empty tracks will be collapsed to 0.

A collapsed track is treated as having a fixed track sizing function of 0px.

Unlike the auto-fill image example, the empty fifth track is collapsed, ending the explicit grid right after the 4th item.

---

auto-fill vs auto-fit

The difference between the two is noticeable when the minmax() function is used.

Use minmax(186px, 1fr) to range the items from 186px to 186px plus a fraction of the leftover space in the grid container.

When using auto-fill, the items will grow once there is no space to place empty tracks.

.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>

When using auto-fit, the items will grow to fill the remaining space because all the empty tracks are collapsed to 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>

---

Playground:

CodePen

Displaying auto-fill tracks

---

Displaying auto-fit tracks

这篇关于CSS网格包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！