本文介绍了为什么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-startgrid-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网格区结束坐标偏移?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-20 20:41