使用CSS网格的父div的跨度宽度

Question

如何使.inner-container的div跨越父内容div的width和height？ codepen

.container {
  height: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 40px 40px 40px;
  grid-template-areas: "m h h" "m c c" "m f f";
}

.inner-container {
  height: 100%;
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: auto auto;
  grid-template-areas: "one two" "three four"
}

.header {
  grid-area: h;
  background-color: #2b9083;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  grid-area: m;
  background-color: #ff66cc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  grid-area: c;
  background-color: #66ccff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  grid-area: f;
  background-color: #65704e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quadrant-one {
  grid-area: one;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
}

.quadrant-two {
  grid-area: two;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
}

.quadrant-three {
  grid-area: three;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
}

.quadrant-four {
  grid-area: four;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
  width: 100%;
}

<div class="container">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">
    <div class="inner-container">
      <div class="quadrant-one">I</div>
      <div class="quadrant-two">II</div>
      <div class="quadrant-three">III</div>
      <div class="quadrant-four">IV</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

Answer 1

将内部容器的宽度设置为100％，您已经正确设置了高度。

   .inner-container {
    width:100%;
    }

Answer 2

这将解决您的问题：

只需将width: 100%;添加到.inner-container

.container {
    height: 100%;
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 40px 40px 40px;
    grid-template-areas: 
    "m h h"
    "m c c"
    "m f f";
}
.inner-container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: auto auto;
  grid-template-areas: 
    "one two"
    "three four"
}

.header {
  grid-area: h;
  background-color: #2b9083;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  grid-area: m;
  background-color: #ff66cc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  grid-area: c;
  background-color: #66ccff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  grid-area: f;
  background-color: #65704e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quadrant-one {
    grid-area: one;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
}

.quadrant-two {
    grid-area: two;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
}

.quadrant-three {
    grid-area: three;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
}

.quadrant-four {
    grid-area: four;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
   width: 100%;
}

<div class="container">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">
    <div class="inner-container">
      <div class="quadrant-one">I</div>
      <div class="quadrant-two">II</div>
      <div class="quadrant-three">III</div>
      <div class="quadrant-four">IV</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

希望这对您有所帮助。