是否有可能使CSS网格包装不使用媒体查询?
在我的例子中，我有一个不确定数量的项目，我想把它们放在一个网格中，我想把这个网格换行。在使用Flexbox时，我无法很好地划分空间。我也想避免一堆媒体的询问。
下面是一些示例代码:
.grid { 显示:网格; grid-gap: 10 px; grid-auto-flow:列; 网格模板-列:186px 186px 186px; ｝ .grid > * { 背景颜色:绿色; 身高:200 px; ｝ < div class = "网格" > < div > 1 < / div > 2 < div > < / div > < div > 3 < / div > 4 < div > < / div > < / div >
这是一张GIF图片:
作为旁注，如果有人能告诉我，我可以避免指定所有项目的宽度，就像我与网格模板列，这将是伟大的。我希望孩子们能指定他们自己的宽度。
当前回答
这是我的尝试。不好意思，我有点特别有创意。
我的方法是一个固定尺寸的父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-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
如果不想要空列，可以使用自动拟合而不是自动填充。
这是我的尝试。不好意思，我有点特别有创意。
我的方法是一个固定尺寸的父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作为repeat()符号的第一个参数。
<auto-repeat> repeat()符号的变体:
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
自动
当自动填充被赋予重复次数时，如果网格 容器在相关轴上有一个确定的大小或最大大小 重复次数为可能的最大正整数 这不会导致网格溢出其网格容器。 https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill
.grid { 显示:网格; grid-gap: 10 px; Grid-template-columns: repeat(自动填充，186px); ｝ .grid > * { 背景颜色:绿色; 身高:200 px; ｝ < div class = "网格" > < div > 1 < / div > 2 < div > < / div > < div > 3 < / div > 4 < div > < / div > < / div >
网格将在不溢出容器的情况下重复尽可能多的轨迹。
在这种情况下，给出上面的例子(见图)，只有5个轨道可以容纳网格容器而不会溢出。我们的网格中只有4个项目，因此在剩余空间中创建了第五个项目作为空轨道。
剩余的空间，轨道#6，结束显式网格。这意味着没有足够的空间来放置另一条轨道。
auto-fit
auto-fit关键字的行为与自动填充相同，除了 在网格项目放置后，任何空重复轨道被折叠。 https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fit
.grid { 显示:网格; grid-gap: 10 px; Grid-template-columns: repeat(auto-fit, 186px); ｝ .grid > * { 背景颜色:绿色; 身高:200 px; ｝ < div class = "网格" > < div > 1 < / div > 2 < div > < / div > < div > 3 < / div > 4 < div > < / div > < / div >
网格仍然会在不溢出容器的情况下重复尽可能多的轨道，但空轨道将被折叠为0。
折叠轨迹被视为具有固定的0px轨迹大小函数。
与自动填充图像示例不同的是，空的第五个轨道被折叠，在第四个项目之后结束显式网格。
自动填充vs自动匹配
当使用minmax()函数时，两者之间的差异是显而易见的。
使用minmax(186px, 1fr)将项目的范围从186px到网格容器剩余空间的一小部分。
当使用自动填充时，一旦没有空间放置空轨道，项目将会增长。
.grid { 显示:网格; grid-gap: 10 px; Grid-template-columns: repeat(自动填充，最小值(186px, 1fr)); ｝ .grid > * { 背景颜色:绿色; 身高:200 px; ｝ < div class = "网格" > < div > 1 < / div > 2 < div > < / div > < div > 3 < / div > 4 < div > < / div > < / div >
当使用自动拟合时，项目将增长以填充剩余的空间，因为所有的空轨道将被折叠为0px。
.grid { 显示:网格; grid-gap: 10 px; Grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); ｝ .grid > * { 背景颜色:绿色; 身高:200 px; ｝ < div class = "网格" > < div > 1 < / div > 2 < div > < / div > < div > 3 < / div > 4 < div > < / div > < / div >
操场上:
CodePen
检查自动填充轨道
检查自动安装轨道
你需要在repeat()函数中自动填充或自动填充:
grid-template-columns: repeat(auto-fit, 186px);
如果你还使用minmax()来允许灵活的列大小，两者之间的区别就会变得很明显:
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
这允许您的列在大小上进行伸缩，从186像素到横跨容器全宽度的等宽列。自动填充将创建尽可能多的列，以适应宽度。假设有5列，即使你只有4个网格项，也会有第5个空列:
使用自动拟合可以避免空列，必要时可以进一步拉伸:
我也遇到过类似的情况。在你所做的上面，我想在容器中居中我的列，同时不允许空列为他们左或右:
.grid {
display: grid;
grid-gap: 10px;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
