css - 使网格区域跨越两行，但不是两列

Question

我一直在尝试创建一个如下所示的布局:

这是代码:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main aside"
                       "main main";
}

.wrapper > aside {
 grid-area: aside;
}

.wrapper > main {
  grid-area: main;
}

<section class="wrapper">
  <aside>Aside</aside>
  <main>MAIN</main>
</section>

Answer 1

这是主要问题:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main aside"  <--- problem
                       "main main";  <--- problem
}

您只能使用 grid-template-areas 设置矩形网格区域。

类似俄罗斯方 block 的形状是无效的(至少在当前版本的 CSS Grid 中是这样，即 Level 1 )。

但是，也许您可​​以使用 Grid 的 line-based placement 技术来实现您的布局:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-auto-rows: 50px;
}

.wrapper > aside {
  grid-row: 1;
  grid-column: 2;
  z-index: 1;
  border: 2px solid blue;
}

.wrapper > main {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  border: 2px solid red;
}

<section class="wrapper">
  <aside>Aside</aside>
  <main>MAIN</main>
</section>

更多详情:

• grid-template-areas with ASCII art is not working
• Grid areas not laying out properly in CSS Grid