您可能正在寻找自动填充:

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-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个空列:

使用自动拟合可以避免空列，必要时可以进一步拉伸:

这是我的尝试。不好意思，我有点特别有创意。

我的方法是一个固定尺寸的父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));
}