时间戳

首页 > 解决方案 > CSS 网格 - 重叠网格线号

html - CSS 网格 - 重叠网格线号

问题描述

抱歉，如果这个问题已经被问过，但我找不到任何解决这个问题的帖子。

我的网格有三个项目：红色、绿色和蓝色。（见 JSFiddle）

Red 有一个 row-start 属性 via grid-area: 6，因此它具有优先级并放在首位。然后将蓝色和绿色按其源顺序放入网格中。结果如下所示：

![![在此处输入图像描述

grid-area: 6;我不明白这个结果，因为尽管指定了 6 的行开始（通过），但它看起来好像红色已放置在第 2 行。如果您在 Firefox devtools 中检查网格，您会看到第 2-6 行的网格行号重叠：

![![在此处输入图像描述

根据MDN，为网格区域指定一个整数值

将第 n 条网格线贡献给网格项的位置。如果给定一个负整数，则它会从显式网格的结束边缘开始反向计数。如果名称以 a 形式给出，则仅计算具有该名称的行。如果没有足够的具有该名称的线，则假定所有隐式网格线都具有该名称，以便找到该位置。

最后一句话对我来说没有意义-我将其读作“由于没有足够的名称为 '6' 的行存在，因此假设 3-6 中的所有隐式网格线都具有该名称，以便找到此名称位置”。算法不应该隐式创建第 3-6 行，然后将红色 div 放在第 6 行第 6 行，第 2-5 行有空格吗？

这是我期待的结果：

在此处输入图像描述

我通过设置获得了这个grid-template-rows: repeat(6, 100px);。（但grid-template-rows: repeat(6, 1fr);没有用，不完全确定为什么。）

标签： htmlcsscss-grid

解决方案

您的行没有大小，因此第 6 行与第 2、3、4、5 行重叠。

#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, 100px);
}


#red {
  grid-area: 6;
  background-color: red;
}

#green {
  background-color: lightgreen;
}

#blue {
  background-color: blue;
}

div {
  height: 100px;
  width: 100px;
}
<div id='grid'>
  <div id='red'></div>
  <div id='green'></div>
  <div id='blue'></div>
 </div>

推荐阅读