CSS 网格环绕答案

【问题标题】：CSS grid wrappingCSS 网格环绕
【发布时间】：2017-08-25 01:22:24
【问题描述】：

是否可以在不使用媒体查询的情况下制作 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 那样指定所有项目的宽度，那就太好了。我希望孩子们指定自己的宽度。

【问题讨论】：

grid-template-columns: auto auto auto auto; 在这种情况下有效吗？ =)

标签： html css css-grid

【解决方案1】：

使用auto-fill 或auto-fit 作为repeat() 表示法的第一个参数。

<auto-repeat> repeat() 表示法的变体：

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

`auto-fill`

当auto-fill作为重复数时，如果网格容器在相关轴上有一个definite 大小或最大大小，然后重复次数是最大可能的正整数这不会导致网格溢出其网格容器。

^{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 个项目，因此在剩余空间中创建了第五个作为空轨道。

剩余的空间，轨道#6，结束显式网格。这意味着没有足够的空间来放置另一条轨道。

`auto-fit`

auto-fit 关键字的行为与 auto-fill 相同，除了在grid item placement 之后，任何空的重复轨道都会折叠起来。

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

`auto-fill` 与 `auto-fit`

当使用minmax() 函数时，两者之间的区别很明显。

使用minmax(186px, 1fr) 将项目范围从186px 到fraction of the leftover space in the grid container。

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

检查自动填充轨道

检查自动调整轨道

【讨论】：

有什么办法可以让它居中在下一行？
就像使用弹性框一样，在 display: grid 元素上使用 justify-content: center
亲爱的@Ricky 如何使它成为 minmax 的第一个属性，例如。 repeat(auto-fill, minmax(186px, 1fr)); 不是像素，只要 div 里面有文字就行？
@mesqueeb 不可能，需要definite 大小。您可以查看this的答案了解更多详情。
有没有办法让它在必须转到下一行时，有两个项目下降而不是只有一个？所以喜欢从 4 到 2 到 1 而不是 4 到 3 到 2 到 1？

【解决方案2】：

您希望在 repeat() 函数中使用 auto-fit 或 auto-fill：

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

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

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

这允许您的列在大小上进行调整，范围从 186 像素到等宽的列延伸到容器的整个宽度。 auto-fill 将创建尽可能多的列以适应宽度。例如，如果有五列适合，即使您只有四个网格项，也会有第五个空列：

使用auto-fit 代替将防止空列，如有必要，可以进一步拉伸：

【讨论】：

我该如何做与“从 186 像素到等宽列”完全相反的操作 - 即我希望它自动适应等宽列，范围为 upto最大 186px 宽的列？ -

【解决方案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。

【讨论】：

有什么办法可以让它居中在下一行？

【解决方案4】：

我也遇到过类似的情况。除了你所做的之外，我想将我的列在容器中居中，同时不允许空列向左或向右：

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

【讨论】：

Re "虽然不允许空列给他们"：你的意思是"同时不允许空列或者给他们" （到 → too → 要么）？还是“但不允许他们有空列”（没有to）？或者别的什么（它似乎不计算）？

【解决方案5】：

这是我的尝试。 请原谅我的绒毛，我觉得很有创意。

我的方法是父div，固定尺寸。其余的只是相应地适合该 div 中的内容。

无论宽高比如何，这都会重新缩放图像。也不会有硬裁剪。

body {
    background: #131418;
    text-align: center;
    margin: 0 auto;
}

.my-image-parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    line-height: 300px; /* Should match your div height */
    text-align: center;
    font-size: 0;
}

/* Start demonstration background fluff */
    .bg1 {background: url(https://unsplash.it/801/799);}
    .bg2 {background: url(https://unsplash.it/799/800);}
    .bg3 {background: url(https://unsplash.it/800/799);}
    .bg4 {background: url(https://unsplash.it/801/801);}
    .bg5 {background: url(https://unsplash.it/802/800);}
    .bg6 {background: url(https://unsplash.it/800/802);}
    .bg7 {background: url(https://unsplash.it/802/802);}
    .bg8 {background: url(https://unsplash.it/803/800);}
    .bg9 {background: url(https://unsplash.it/800/803);}
    .bg10 {background: url(https://unsplash.it/803/803);}
    .bg11 {background: url(https://unsplash.it/803/799);}
    .bg12 {background: url(https://unsplash.it/799/803);}
    .bg13 {background: url(https://unsplash.it/806/799);}
    .bg14 {background: url(https://unsplash.it/805/799);}
    .bg15 {background: url(https://unsplash.it/798/804);}
    .bg16 {background: url(https://unsplash.it/804/799);}
    .bg17 {background: url(https://unsplash.it/804/804);}
    .bg18 {background: url(https://unsplash.it/799/804);}
    .bg19 {background: url(https://unsplash.it/798/803);}
    .bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */

.my-image {
    width: auto;
    height: 100%;
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="my-image-parent">
    <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg4"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg5"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg6"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg7"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg8"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg9"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg10"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg11"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg12"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg13"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg14"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg15"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg16"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg17"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg18"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg19"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg20"></div>
</div>

【讨论】：

auto-fill

auto-fit

auto-fill 与 auto-fit

CodePen

`auto-fill`

`auto-fit`

`auto-fill` 与 `auto-fit`