CSS网格包装

是否有可能使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 image of what I'm seeing

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

290920 次浏览
小开

你可能正在寻找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。

小开
最佳答案

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

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

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

auto-fill

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

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>

网格将在不溢出容器的情况下重复尽可能多的轨迹。

Using auto-fill as the repetition number of the repeat() notation .

在这种情况下，给出上面的例子(见图片)，只有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。

Using auto-fit as the repetition number of the repeat() notation .

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

auto-fill vs 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>

操场上:

< a href = " https://codepen。io / rickyruiz /钢笔/ KemeoX noreferrer“rel = > CodePen < / >

检查自动填充轨道

auto-fill

检查自动安装轨道

auto-fit

小开

你需要在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将创建与宽度匹配的任意多列。假设有5列，即使你只有4个网格项，也会有第5个空列:

Enter image description here

使用auto-fit来代替将防止空列，如有必要进一步扩展您的列:

Enter image description here

小开

这是我的尝试。我觉得特别有创意。

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

小开

我也遇到过类似的情况。在你所做的上面，我想在容器中居中我的列，同时不允许空列为他们左或右:

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

提交答案