CSS 网格环绕

Question

是否可以在不使用媒体查询的情况下制作 CSS 网格环绕？

在我的例子中，我有 non-deterministic 个要放在网格中的项目，我希望该网格环绕。使用 Flexbox，我无法可靠地 space 很好地处理事情。我也想避免一堆媒体查询。

.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 图片：

作为 side-note，如果有人能告诉我如何避免像 grid-template-columns 那样指定所有项目的宽度，那就太好了。我希望 children 指定自己的宽度。

Answer 1

您可能正在寻找 auto-fill:

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

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

要更有效地用完可用的 space，您可以使用 minmax，并传入 auto 作为第二个参数：

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

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

如果您不想要空列，可以使用 auto-fit 而不是 auto-fill。

Answer 2

使用任一 auto-fill or auto-fit as the first argument of the repeat() 表示法。

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

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

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

^{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 个项目，因此第五个项目被创建为剩余 space.

中的空轨道

剩余 space 的其余部分，轨道 #6，结束显式网格。这意味着没有足够的 space 来放置另一首曲目。

`auto-fit`

The auto-fit keyword behaves the same as auto-fill, except that after grid item placement any empty repeated tracks are collapsed.

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

`auto-fill` 对比 `auto-fit`

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

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

使用auto-fill时，一旦没有space放置空轨道，项目就会增长。

.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 时，项目将增长以填充剩余的 space，因为所有空轨道将折叠为 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 3

您想要 auto-fit 或 auto-fill 在 repeat() 函数中：

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

如果您还使用 minmax() 以允许灵活的列大小，则两者之间的区别变得明显：

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

这使您的列可以灵活调整大小，范围从 186 像素到横跨容器整个宽度的等宽列。 auto-fill 将创建适合宽度的尽可能多的列。如果，比如说，五列适合，即使你只有四个网格项目，也会有第五个空列：

改用 auto-fit 将防止空列，必要时进一步扩展您的列：

Answer 4

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

我的方法是父级 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>

Answer 5

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

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

CSS 网格环绕

CSS grid wrapping

html

css

css-grid

`auto-fill`

`auto-fit`

`auto-fill` 对比 `auto-fit`

CodePen

CSS 网格环绕

CSS grid wrapping

html

css

css-grid

auto-fill

auto-fit

auto-fill 对比 auto-fit

CodePen

`auto-fill`

`auto-fit`

`auto-fill` 对比 `auto-fit`