209

是否可以在不使用媒体查询的情况下制作 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 图片：

我所看到的 GIF 图像

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

4

5 回答 5

367

使用auto-fill或auto-fit作为repeat()符号的第一个参数。

<auto-repeat>repeat()符号的变体：

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

auto-fill

当auto-fill作为重复次数给出时，如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是不会导致网格溢出其网格容器的最大可能正整数。

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>

网格将重复尽可能多的轨道而不会溢出其容器。

使用自动填充作为 repeat() 表示法的重复次数

在这种情况下，给定上面的示例（见图），只有 5 个轨道可以容纳网格容器而不会溢出。我们的网格中只有 4 个项目，因此在剩余空间内将第五个项目创建为空轨道。

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

auto-fit

关键字的auto-fit行为与 相同auto-fill，只是在放置网格项目后，任何空的重复轨道都会折叠。

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-fit 作为 repeat() 表示法的重复次数

与auto-fill图像示例不同，空的第五个轨道被折叠，在第 4 个项目之后结束显式网格。

auto-fill对比auto-fit

使用该minmax()功能时，两者之间的差异很明显。

用于minmax(186px, 1fr)将项目范围从网格容器中剩余空间的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>

操场：

代码笔

检查自动填充轨道

自动填充

检查自动调整轨道

自动适应

于 2017-03-30T22:38:14.253 回答
20

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

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

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

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

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

在此处输入图像描述

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

在此处输入图像描述

于 2017-03-30T23:52:43.750 回答
11

您可能正在寻找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.

于 2017-03-30T22:37:01.500 回答
3

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

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
于 2019-03-28T15:54:10.213 回答
0

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

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

于 2017-06-23T05:39:00.183 回答