CSS网格包装？

Question

是否可以在不使用媒体查询的情况下进行CSS网格包装？

在我的情况下，我有一个非确定数量的项目，我想放在网格中，我希望该网格包装。使用flexbox，我无法可靠地分隔事物。我也想避免一堆媒体查询。

此处some sample code：

＆＃13;

＆＃13;

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}

＆＃13;

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是一个gif：

作为旁注，如果有人可以告诉我如何避免指定所有项目的宽度，就像我grid-template-columns那样很棒。我更喜欢孩子们指定自己的宽度。

Answer 1

使用auto-fill或auto-fit作为repeat()表示法的重复次数。

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

auto-fill

  

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

＆＃13;

＆＃13;

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

＆＃13;

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

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

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

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

auto-fit

auto-fit关键字与auto-fill的行为相同，只是在grid item placement algorithm之后，剩余空间中的所有空曲目将折叠为0。

＆＃13;

＆＃13;

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

＆＃13;

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

网格仍会重复尽可能多的曲目而不会溢出其容器，但空曲目将折叠为0。

折叠曲目被视为具有0px的固定曲目大小调整功能。

与auto-fill图片示例不同，空的第五个轨道已折叠，在第四个项目之后立即结束显式网格。

auto-fill vs auto-fit

使用minmax()功能时，两者之间的区别很明显。

使用minmax(186px, 1fr)将项目范围从186px加到186px加上网格容器中剩余空间的一小部分。

使用auto-fill时，一旦没有空间放置空曲目，这些项目就会增长。

＆＃13;

＆＃13;

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

＆＃13;

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用auto-fit时，项目将增长以填充剩余空间，因为所有空曲目都已折叠为0px。

＆＃13;

＆＃13;

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

＆＃13;

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

游乐场：

CodePen

检查自动填充曲目

检查自动调整曲目

Answer 2

您希望auto-fit函数中包含auto-fill或repeat()：

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

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

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

这允许您的列在大小上弯曲，范围从186px到等宽度的列，在整个容器的宽度上延伸。 auto-fill将创建适合宽度的列数。如果，例如，五列适合，即使您只有四个网格项，也会有第五个空列：

使用auto-fit代替将阻止空列，如有必要，可以进一步扩展您的列：

Answer 3

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

Answer 4

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

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

Answer 5

这是我的尝试。 请原谅，我感觉更有创意。

我的方法是父级div，其中已修复 尺寸。其余的只是相应地适合div内的内容。

无论宽高比如何，这都将重新缩放图像。也会有没有艰难的裁剪。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;