相关疑难解决方法(0)

在 CSS Grid 中使用带有隐式行的负整数

我正在尝试使用扁平的 HTML 结构制作一个简单的侧边栏布局,其中第一个<aside>元素完全填充第一列。

我的问题是,负行结束值似乎不适用于为第二列中的所有元素隐式创建的行。

预期的:

在此处输入图片说明

实际的:

在此处输入图片说明

下面是说明问题的可运行代码片段。

article {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: gray;
}

aside {
  grid-row: 1/-1;
  grid-column: 1/2;
  background: pink;
}

section {
  grid-column: 2/3;
  background: yellow;
}
Run Code Online (Sandbox Code Playgroud)
<article>
  <aside>In the left column (top to bottom)</aside>
  <section>In the right column</section>
  <section>In the right column</section>
  <section>In the right column</section>
</article>
Run Code Online (Sandbox Code Playgroud)

css css-grid

6
推荐指数
1
解决办法
2626
查看次数

标签 统计

css ×1

css-grid ×1