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

Question

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

有没有办法，使用CSS网格，具有以下格式，其中标题，子和内容都是“文章”元素的一部分，“旁白”是2列网格中的第二个？

从我迄今为止的研究来看，似乎这是不可能的。

Answer 1

如果你知道，你可以通过使用嵌套的CSS网格来破解你的方式：

1. 旁边部分的width
2. 标题和子标题部分的height

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

您可以使用为aside元素创建空间的伪元素，然后将其隐藏在外部grid容器中 - 请查看下面的演示：

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%);
}

<div>
  <section>
    <article>Article title</article>
    <article>Article sub-heading</article>
    <article>Article content</article>
  </section>
  <aside>Aside</aside>
</div>

Answer 2

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

<div class="wrapper">
  <article>
    <div style="float:left;width:100%" class="one">One</div>
    <div style="float:left;width:100%" class="two">Two</div>
    <div style="float:left;width:70%" class="three">Three</div>
  </article>
 <div  style="float:left;width:30%" class="four">Four</div>
</div>

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