0

在这个Jsbin 示例中，网格区域从第 1 行第 1 列开始，到第 3 行第 2 列结束。

然而，在 CSS 中，网格区域的编码如下：

grid-area: 1 / 1 / 4 / 3;

虽然开始坐标（例如“ 1 / 1”）没有偏移，但第二个坐标是（例如，3 / 2它们不是“”，而是“ 4 / 3”）。

是否有第二个坐标偏移但第一个坐标没有偏移的原因？

这也是上述 JsBin 中的标记：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width">
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 10vh);
      grid-template-rows: repeat(4, 10vh);
      grid-gap: 13px;
      background-color: black;
      padding: 2px;
      justify-content: center;

    }

    .grid-container>div {
      background-color: aqua;
      /*rgba(255, 255, 255, 0.8);*/
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }

    .item1 {
      grid-area: 1 / 1 / 4 / 3;
    }

  </style>
</head>

<body>

  <div class="grid-container">
    <div class="item1">1</div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>

    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>

    <div class=""></div>
    <div class=""></div>
    <div class=""></div>


  </div>

</body>

</html>
4

1 回答 1

1

因为“偏移量”实际上没有这样的东西。

与网格线相关的数字；所以 column1 从 1 开始，在 2 结束， column2 从 2 开始，在 3 结束，依此类推。

每行/列有两行，一个开始号和一个结束号......例如grid-row-start和grid-row-end。

显然end必须大于start或两者之间没有任何东西......因此您所指的“偏移量”。

示例图像..

在此处输入图像描述

grid-area: 1 / 1 / 4 / 3;

功能上是..

grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 4; /* end of row 3 */
grid-column-end: 3; /* end of column 2 */
于 2020-05-11T10:20:28.057 回答