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设置矩形网格区域。

类似俄罗斯方块的形状无效（至少在当前版本的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>

更多详细信息：

Answer 2

不是一个真正的答案，而是为了娱乐和回忆＆表明浮动元素的行为可以用来伪造这种形状的布局。

Float并不是过时的，即使display变得非常好，它也可以一次仍然有用。所以这是我的评论，an old pen是一个看起来很接近您的网格的示例。

大约是https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

块格式设置上下文是网页的可视CSS呈现的一部分。在该区域中会出现块状框的布局，并且在其中浮动会与其他元素交互。

下面的演示

/* my grid not flexible enough ...

.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;
}

*/
/* back to the past */
.wrapper {
  overflow: hidden;/* to keep float inside */
}

.wrapper aside {
  float: right;
  width: 300px;
}


/*makup*/
.wrapper {
  box-shadow: 0 0 0 3px inset red;
}
.wrapper aside {
  padding: 1em;
  border: solid;
  box-shadow: 0 0 0 3px white, 0 0 0 6px red;
  margin: 0 0 1.5em 1em;
}

main {
  padding: 1em;
}

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

要让main的内容在aside下流动，请记住您正在处理float，请不要将显示或oveflow重置为main来保持这种状态，并了解块格式上下文。

使网格区域跨两行，但不跨两列

2 个答案: