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-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图像示例不同,空的第五个轨道被折叠,在第四个项目之后立即结束显式网格.

auto-fill VS auto-fit

minmax()使用该功能时,两者之间的差异是显而易见的.

使用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

检查自动填充轨道

检查自动调整轨道

Answer 2

你想要auto-fit或者auto-fill在repeat()函数内部:

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

如果您还使用a minmax()来允许灵活的列大小,则两者之间的差异变得明显:

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

这允许您的列在大小上弯曲,范围从186px到等宽度的列,在整个容器的宽度上延伸.auto-fill将创建尽可能多的列,以适应宽度.如果,例如,五列适合,即使您只有四个网格项,也会有第五个空列:

auto-fit相反,使用将阻止空列,必要时进一步拉伸你的列:

Answer 3

你在找auto-fill？

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

演示:http://codepen.io/alanbuchanan/pen/wJRMox

为了更有效地消耗可用空间,您可以使用minmax,并auto作为第二个参数传入:

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

演示:http://codepen.io/alanbuchanan/pen/jBXWLR

如果您不想要空列,则可以使用auto-fit而不是auto-fill.