Question

在CSS网格中，grid-column: 1/1和1/2显示相同的结果。它们之间有什么区别吗？请看下面的代码。

＆＃13;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
}

.item1 {
  grid-column: 1 / 2;
}

＆＃13;

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

＆＃13;

grid-column值1 / 2和1 / 1相同。有什么区别？

Answer 1

这是因为对grid-column: 1 / 2的含义存在误解。

这并不意味着跨越两列（第一和第二）...这意味着元素在网格行 1处开始并在网格处结束 - 行 2。

Grid Track @ MDN

网格轨道是两个网格线之间的空间。它们通过使用grid-template-columns和grid-template-rows属性或简写网格或网格模板属性在显式网格中定义。通过将网格项定位在显式网格中创建的轨道之外，也可以在隐式网格中创建轨道。

因此，在您的示例中，因为您有4列，所以有5个显式 网格线（我将排除由隐含网格创建的任何网格线避免混淆）。

由于第一列将始终位于第1行和第1行之间。 2，它只跨越第一列。

第1栏：第1 - 2行
第2栏：第2 - 3行
第3栏：第3 - 4行
第4栏：第4 - 5行

grid-column: 1/1本质上是无效所以它会重置为默认值，即只跨越第一列。

A Complete Guide to Grid

Answer 2

不同之处在网格规范中解释：

8.3.1. Grid Placement Conflict Handling

如果起始行等于结束行，则删除结束行。

好的，那么当删除结束行时会发生什么？

它计算为auto。

8.4. Placement Shorthands: the grid-column, grid-row, and grid-area properties

如果指定了两个<grid-line>值，则grid-row-start /   grid-column-start longhand设置为斜杠之前的值，并且   将grid-row-end / grid-column-end longhand设置为该值   在斜线之后。

当省略第二个值时，如果第一个值是a   <custom-ident>，grid-row-end / grid-column-end缩写是   也设置为<custom-ident>;否则，它被设置为auto。

值auto means span 1。

<custom-ident>是作者定义的标识符，在Grid中引用named grid areas，如下所示：

#grid {
 display: grid;
 grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
 grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
}

由于代码中没有指定的网格区域，grid-column结束行将解析为auto。

因此，以下规则都是相同的：

grid-column: 1 / 2
grid-column: 1 / 1
grid-column: 1 / auto
grid-column: 1

网格列值1/1和1/2之间的差异是什么？

2 个答案: