CSS网格包装 [英] CSS grid wrapping

问题描述

是否可以在不使用媒体查询的情况下进行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这样指定所有项目的宽度，那会很棒.我希望孩子们指定自己的宽度.

解决方案

使用 auto-fit 作为 repeat() 表示法的重复编号.

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

---

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个项目，因此第五个项目在剩余空间中被创建为空轨道.

其余的剩余空间(第6磁道)结束显式网格.这意味着没有足够的空间来放置其他轨道.

---

auto-fit

除了在auto-fit关键字的行为与auto-fill相同. >网格项目放置算法剩余空间中的任何空白轨道都将折叠为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> 

网格仍将重复尽可能多的轨道，而不会溢出其容器，但是空轨道将被折叠为0.

折叠的轨道被视为具有固定的0px轨道尺寸功能.

与auto-fill图像示例不同，空白的第五条轨道被折叠，在第4条之后紧接显式网格.

---

auto-fill与auto-fit

当 功能.

使用minmax(186px, 1fr)将范围从186px到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> 

---

游乐场:

CodePen

检查自动填充曲目

---

检查自动调整轨迹

Is it possible to make a 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 image:

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

Inspecting auto-fill tracks

---

Inspecting auto-fit tracks

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