CSS网格环绕

126

是否可以在不使用媒体查询的情况下进行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那将是很好的。我希望孩子们指定自己的宽度。

html  css  css-grid 
— 肯德奇
source
2
grid-template-columns: auto auto auto auto;在这种情况下有效吗？=）
— Jakub Chlebowicz

Answers:

219

使用auto-fill或auto-fit作为repeat()符号的重复编号。

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

auto-fill

当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，只是后电网项目布局算法的剩余空间内的任何空轨迹会晕倒0。

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

使用自动拟合作为repeat（）表示法的重复编号

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

auto-fill 与 auto-fit

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

用于minmax(186px, 1fr)将项目范围从186px到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>
展开摘要

操场：

密码笔

检查自动填充轨道

自动填充

检查自动装配轨道

自动适应

— 瑞奇
source
3
有什么办法可以使下一行的内容居中吗？
— kentcdodds
就像使用flex box一样，在display: grid元素上使用justify-content: center
— Spittal
亲爱的@Ricky如何使其成为minmax的第一个属性，例如。repeat(auto-fill, minmax(186px, 1fr));是不是像素，但只要div内有文字？
— mesqueeb
1
@mesqueeb不可能，需要确定的大小。您可以查看此答案以获取更多详细信息。
— Ricky
1
有什么方法可以使它在必须转到下一行时下降两个项目，而不仅仅是下降一个？像是4到2到1，而不是4到3到2到1？
— sammiepls
16

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

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

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

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

这使您的列的大小可以灵活变化，范围从186像素到在容器的整个宽度上延伸的等宽列。auto-fill将创建与宽度相同数量的列。如果说有五列适合，即使您只有四个网格项，也将有第五个空列：

在此处输入图片说明

使用auto-fit反而会阻止空列，拉伸你如果还必要：

在此处输入图片说明

— 基思特格兰特
source
7

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

— 阿兰布坎南
source
2
有什么办法可以使下一行的内容居中吗？
— kentcdodds
3

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

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
— 法雷尔
source
重“而不允许空列，为他们”：你的意思“而不是让空列要么为他们”（到 → 太 → 要么）？或“同时不允许他们空列”（不给）？还是其他的东西（似乎没有计算出来）？
— 彼得·莫滕森
1

这是我的尝试。对不起，我觉得自己很有创造力。

我的方法是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>
展开摘要

— 哈兹·科德
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.