Question

有什么区别：

display: grid;
grid-template-columns: repeat(auto-fill, 100px);

和

display: grid;
grid-auto-columns: 100px;

由于 repeat(auto-fill) 的存在，使用 grid-auto-columns 似乎是多余的？

Answer 1

grid-template-columns: repeat(auto-fill, 100px); 将创建一个具有变量列数的网格，其宽度为 100px。我们是允许列不溢出的最大数量。

grid-auto-columns: 100px; 将定义列的宽度等于 100px（如果没有指定模板，否则只有隐式列会受到影响）。它与 grid-template-columns: repeat(auto-fill, 100px);

不同

一些例子来说明：

.box {
  display:grid;
  grid-gap:5px;
  border:1px solid;
  margin:5px;
}


.box  * {
  height:50px;
  background:red;
}

<div class="box" style="grid-template-columns: repeat(auto-fill, 100px);">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>

the default flow
<div class="box" style="grid-auto-columns:100px;">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
column flow:
<div class="box" style="grid-auto-columns:100px;grid-auto-flow:column">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>

<块引用>

当给定自动填充作为重复次数时，如果网格容器在相关轴上有确定的尺寸或最大尺寸，则重复次数为不会导致网格溢出的最大可能正整数其网格容器的内容框 ^StringJoiner

和

<块引用>

grid-auto-columns 和 grid-auto-rows 属性指定了未由 grid-template-rows 或 grid-template-columns 分配大小的轨道的大小。 ^ref

“网格模板列：重复（自动填充）”和“网格自动列”之间的区别

1 个答案: