为什么css网格区结束坐标偏移？ [英] Why are CSS Grid-Area ending coordinates offset?
本文介绍了为什么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网格区结束坐标偏移？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
