Css 系统网格布局

代码：

我正在尝试制作一个网格容器

左：1列1行 右-顶部：1行1列 右下角：2列

我正在努力实现这个目标，但我没有成功：

例如：

如果将父网格划分为8个正方形2行，每个行包含4个正方形，则可以定义每个新闻项的区域

定义每个区域时，从线条的角度考虑非常重要：

垂直：

顶行，即父项的上边框是第1行而不是第0行！ 下一行是2 最后一行，即父网格的底边界是第3行 横向：

最左边的一行，即父对象的左边框是第1行，而不是第0行！ 下一行是2 下一行是3 下一行是4 最后一行，即父对象的右边框是第5行 所以，考虑一下左手边2x2区块中最重要的新闻项目

它包括：

垂直线1至垂直线3 和来自：

水平线1至水平线3。 使用以下格式：

export const GridContainer = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1.42fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  margin-top: 50px;
  background: red;
  height: 500px;
`;
export const NewsWrapper = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  grid-row: 1/2;
  background: yellow;
`;

export const News2Wrap = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-row: 2;
  background: orange;
  & > div:nth-child(1) {
    grid-row: 1/4;
    grid-column: 1;
    background: green;
  }
  & > div:nth-child(2) {
    grid-row: 1/2;
    grid-column: 2;
    background: blue;
  }
  & > div:nth-child(3) {
    grid-row: 2/4;
    grid-column: 2;
    background: black;
  }
`;

这可以描述为：

grid-area: Start Vertical Line / Start Horizontal Line / End Vertical Line / End Horizontal Line

工作示例：

.家长{ 显示：网格； 网格模板列：80px 80px 80px 80px； 网格模板行：80px 80px； } .优先事项-1{ 网格面积：1/1/3/3； 背景色：rgb191,0,0； } .优先事项-2{ 网格面积：1/3/2/5； 背景色：rgb255,0,0； } .优先事项-3{ 网格面积：2/3/3/4； 背景色：RGB255127,0； } .优先事项-4{ 网格面积：2/4/3/5； 背景色：rgb255、255、0； }

---

当我在所有列上使用1 fr时，我得到它无响应。在达到最大值后是否存在跳过行的对齐属性？为父级提供明确的高度（例如90vh）是否解决了此问题？

grid-area: Start Vertical Line / Start Horizontal Line / End Vertical Line / End Horizontal Line

grid-area: 1 / 1 / 3 / 3