获取要包装在CSS Grid中的列 [英] Getting columns to wrap in CSS Grid

问题描述

使用display: grid;时，如何指定最大列数，当内容对于空间而言变得太宽(或小于最小大小)时，列数会自动中断?有没有媒体查询的方法吗?

How can you specify the maximum number of columns when using display: grid;, with it automatically breaking when the content becomes too wide for the space (or smaller than a minimum size)? Is there a way to do this without media queries?

例如，我有以下内容，当内容没有足够的空间时，它们不会分成单列模式.

For example, I have the following which won't break into a single column mode when there is not enough room for the content.

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
}

<div id="grid">
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>

推荐答案

HTML或CSS都没有关于何时容器包装后代的任何概念.

Neither HTML or CSS have any concept of when descendants of a container wrap.

本质上，浏览器在初始级联期间渲染文档.当孩子包裹时，它不会重排文档.

Essentially, the browser renders the document during an initial cascade. It does not reflow the document when a child wraps.

因此，要更改列数，您将需要在行的某处设置宽度限制或使用媒体查询.

Therefore, to change the number of columns, you will need to set a width limit somewhere along the line or use media queries.

这里有更深入的说明: 在包装容器时使容器收缩以适合子元素

Here's a more in-depth explanation: Make container shrink-to-fit child elements as they wrap

如果您可以定义列宽，则网格布局的auto-fill函数使包装变得容易.

If you can define a column width, then grid layout's auto-fill function makes wrapping easy.

在此示例中，列数完全基于屏幕的宽度:

In this example, the number of columns is based entirely on the width of the screen:

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* see notes below */
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
}

<div id="grid">
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
</div>

jsFiddle演示

注意:

auto-fill 函数允许网格在不使容器溢出的情况下尽可能多地排列网格轨迹(列或行).这可以创建与Flex布局的flex-wrap: wrap类似的行为.

The auto-fill function allows the grid to line up as many grid tracks (columns or rows) as possible without overflowing the container. This can create similar behavior to flex layout's flex-wrap: wrap.

minmax() 功能允许您设置网格轨道的最小和最大尺寸范围.在上面的代码中，列轨道的宽度最小为100px，最大可用空间为空.

The minmax() function allows you to set a minimum and maximum size range for a grid track. In the code above, the width of column tracks will be a minimum of 100px and maximum of whatever free space is available.

fr 单位代表可用空间的一小部分.它与Flex布局中的flex-grow相似.

The fr unit represents a fraction of the available space. It is similar to flex-grow in flex layout.

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