使用CSS网格时，是否可以让孩子超越父母的网格放置？

Question

我有一个简单的CSS网格，有5列和两个行。第一行包含5个元素，但我希望第二行包含所有5列的第五元素的孩子，这可能吗？

我希望红色元素（元素5的子女）是所有其他元素以下行的宽度的100％。

.container {
  display: grid;
  grid-template-columns: [line1] min-content [line2] min-content [line3] min-content [line4] max-content [line5] max-content [end];
  grid-template-rows: [row1-start] 10% [row1-end row2-start] auto [row2-end];
  column-gap: 1em;
  row-gap: 2em;
}
.element1 {
  max-height: 2em;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: pink;
}
.element2 {
  max-height: 2em;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: blue;
}
.element3 {
  max-height: 2em;
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: orange;
}
.element4 {
  max-height: 2em;
  grid-column-start: 4;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
  background: yellow;
}
.element5 {
  grid-column-start: 5;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 1;
  justify-self: end;
  background-color: purple;
}

.element-sub5 {
  grid-column: 1 / 5;
  grid-row: 2;
    border: 1px solid red;
  background-color: red;
    padding: 0 1em;
    margin-top: 2.5em;
  width: 100%;
  height: 10em;
  float: left;
}

<div class="container">
  <div class="element1">
  element1
  </div>
  <div class="element2"> 
  element2
  </div>
  <div class="element3">
  element3
  </div>
  <div class="element4"> 
  element4
  </div>
  <div class="element5">
  element5
    <span class="element-sub5">
      REALLY BIG BOX OF TEXT
    </span> 
  </div>
</div>

示例布局

Answer 1

可以设置这样的网格，但前提是您的第五项元素不在其中……

CSS

.parent { 
display: grid; 
grid-template-columns: repeat(5, 1fr); 
grid-template-rows: repeat(2, 1fr); 
grid-column-gap: 0px;
grid-row-gap: 0px; 
}
.div1 { grid-area: 1 / 1 / 2 / 2; } 
.div2 { grid-area: 1 / 2 / 2 / 3; } 
.div3 { grid-area: 1 / 3 / 2 / 4; } 
.div4 { grid-area: 1 / 4 / 2 / 5; } 
.div5 { grid-area: 1 / 5 / 2 / 6; } 
.div6 { grid-area: 2 / 1 / 3 / 6; } 

HTML

<div class="parent"> 
<div class="div1"> </div> 
<div class="div2"> </div> 
<div class="div3"> </div> 
<div class="div4"> </div> 
<div class="div5"> </div> 
<div class="div6"> </div> 
</div>