是否可以拆分网格项以允许不同的跨度？

Question

我有一篇文章和旁边（侧边栏）元素 - 很简单，除了文章的标题和子标题需要跨越整行。如果我从文章中取出标题/子标题，则文章元素不再在语义上完整。

有没有办法，使用CSS Grid，有下面的格式，其中Title，Sub和Content都是“Article”元素的一部分，而“Aside”是2列网格中的第二个？

到目前为止，我的研究似乎不可能。

Answer 1

只要文章没有浮动，你就可以通过简单地浮动所有单元格来实现这一点 - https://jsfiddle.net/yxbckzcq/1/

{{1}}

Answer 2

如果你知道的话，你可以 hack 使用嵌套CSS网格：

1. 搁置部分的width

2. 标题和子标题部分的height

（在许多布局中，这些尺寸是固定的）

您可以使用伪元素为aside元素创建空间，然后在外部{em>潜行 {1}}容器 - 查看下面的演示：

＆＃13;
＆＃13;
grid
＆＃13;
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

article,
aside {
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
div {
  display: grid;
  grid-template-areas: "section aside";
}

section {
  grid-area: section;
  display: grid;
  grid-template-areas: "header header" "subhead subhead" "content empty";
  grid-template-rows: 50px 50px auto;
  grid-template-columns: 80vw auto;
  height: 100vh;
  width: 100vw;
}

section article:first-child {
  grid-area: header;
}

section article:nth-child(2) {
  grid-area: subhead;
}

section article:last-child {
  grid-area: content;
}

section:after {
  content: '';
  display: block;
  grid-area: empty;
}

aside {
  grid-area: aside;
  height: calc(100vh - 100px);
  width: 20vw;
  align-self: flex-end;
  position:relative;
  transform: translateX(-100%);
}
＆＃13;
＆＃13;
＆＃13;

Answer 3

你可以使用这样的东西。

* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 10px;
  color: #d9480f;
}.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 4;
  grid-row: 1;
}
.two { 
  grid-column: 1 / 4;
  grid-row: 2;
}
.three {
  grid-column: 1 / 3;
  grid-row: 3;
  min-height:200px;
}
.four {
  grid-column: 3;
  grid-row: 3;
  min-height:200px;
}

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

同时检查Fiddle.

有关详细信息，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout