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

Question

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

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

从我目前的研究来看，这似乎是不可能。

Answer 1

如果您知道，您可以hack嵌套 CSS 网格：

1. aside 部分的width

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

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

您可以使用 pseudo 元素为 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