Question

我正在探索CSS Grid Layout这是我不明白的事情。我已将grid-auto-columns与grid-template-columns一起使用，但它不会影响任何内容。

我试图在grid-auto-columns中设置各种值，但它不会影响任何内容。

为什么不呢？

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-columns: 50px;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

.wrapper>div {
  border: 2px solid rgb(233, 171, 88);
  border-radius: 5px;
  background-color: rgba(233, 171, 88, .5);
  padding: 1em;
  color: #d9480f;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Answer 1

简答

grid-auto-columns无效的原因是隐式网格中缺少列。

说明

在CSS网格布局中，有两种类型的网格：显式和隐式。

显式网格是您明确定义的网格。使用以下属性时，可以创建显式网格：

grid-template-rows
grid-template-columns
grid-template-areas
grid（这是上述三个属性的简写，among others）

但是，您不需要在显式网格中保留网格项。您可以在任何地方放置项目并创建网格区域，甚至可以在显式网格之外。这就是隐含网格的用武之地。

隐式网格是由行和列创建的，这些行和列是自动生成的，以容纳位于显式网格之外的网格项。

grid-template-columns和grid-template-rows大小明确跟踪，grid-auto-columns和grid-auto-rows大小隐含跟踪。

查看代码，显式网格中有两列和三行。

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-columns: 50px;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

三个显式行将采用相等的可用空间分布（1fr）。任何其他行的高度为200px。

两个显式列将采用相等的可用空间分布。任何其他列的宽度都为50px。

但是在你的代码中，显式网格之外没有列;只有两列。因此grid-auto-columns无效。

以下是规范如何定义这些网格类型：

7.1. The Explicit Grid

三个属性grid-template-rows，grid-template-columns，   和grid-template-areas一起定义网格的显式网格   容器

grid属性是一种速记，可用于设置所有三个   在同一时间。

由于网格项目位于外部，最终网格可能会变大   显式网格;在这种情况下，将创建隐式轨道   隐式曲目将由grid-auto-rows和grid-auto-columns调整   grid-template-rows属性。

7.5. The Implicit Grid

grid-template-columns，grid-template-areas和   grid-auto-rows属性定义了固定数量的曲目   形成显式网格。

当网格项位于这些边界之外时，网格   容器通过添加隐式网格线生成隐式网格轨道   到网格。

这些线与显式网格一起形成隐式网格。

这些grid-auto-columns和if (position > -1) { return position; } else { return -1; }属性的大小   隐含的网格轨迹。

为什么网格自动列无效？

1 个答案:

简答

说明