网格列值1/1和1/2有什么区别？ [英] What's the difference between grid-column value 1/1 and 1/2?

问题描述

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

In CSS grid, grid-column: 1/1 and 1/2 are showing the same result. Is there any difference between them? Look at the code below.

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

.item1 {
  grid-column: 1 / 2;
}

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

网格列值 1/2 和 1/1 是相同的。有什么区别？

grid-column value 1 / 2 and 1 / 1 is same. What's the difference?

推荐答案

这是因为对 grid-column的误解：1/2 表示。

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

It does NOT mean span two columns (the First & Second)...it means that the element starts at grid-line 1 and ends at grid-line 2.

网格跟踪@ MDN

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

A grid track is the space between two grid lines. They are defined in the explicit grid by using the grid-template-columns and grid-template-rows properties or the shorthand grid or grid-template properties. Tracks are also created in the implicit grid by positioning a grid Item outside of the tracks created in the explicit grid.

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

So in your example, because you have 4 columns, there are 5 explicit grid-lines (I'll exclude any grid-lines created by the implict grid to avoid confusion).

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

Since the first column will always be between lines 1 & 2, it spans only the first column.

• 列1：第1-2行


• 列2：第2-3行


• 第3列：第3-4行


• 第4列：第4-5行

• Column 1 : Lines 1 - 2
• Column 2 : Lines 2 - 3
• Column 3 : Lines 3 - 4
• Column 4 : Lines 4 - 5

网格列：1/1 本质上是无效，因此它重置为默认值是仅跨第一列。

grid-column: 1/1 is essentially invalid so it resets to it's default which is to span only the first column.

完整的网格指南

这篇关于网格列值1/1和1/2有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！