为什么css网格区结束坐标偏移？

本文介绍了为什么css网格区结束坐标偏移？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在此Jsbin example中，网格区域从第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>

，因为"偏移量"实际上不是这样的东西。

与网格相关的数字行；因此，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 */

这篇关于为什么css网格区结束坐标偏移？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

偏移

为什么css网格区结束坐标偏移？

问题描述

推荐答案

，因为"偏移量"实际上不是这样的东西。