显示flex是覆盖显示网格布局

Question

当我在其中包含显示器flex布局时，我的显示网格布局有问题。

在我的第一个例子中，我有我想要的网格布局。它分为5列，标题占100％，页脚占100％，在它们之间我有一个占20％的过滤元素，占60％的项目元素，另外20％占用另一个元素。这非常有效。

但是，在我的秒示例中，我在items网格中添加了一个flex项。当我这样做时，过滤器和旁边的元素不再保留预期的20％，并且items元素变得更大。看起来好像显示器flex会覆盖显示网格。我认为这是因为显示网格和显示flex元素都从正常文档流中取出。

所以我的问题是，如何在不丢失网格的预期布局的情况下将display flex元素与grid的items元素一起使用（filter-20％items-60％aside-20％）？

.header {
  grid-area: header;
  background-color: coral;
}

.filter {
  grid-area: filter;
  background-color: aquamarine;
}

.items {
  grid-area: items;
  background-color: lightskyblue;
}

.aside {
  grid-area: aside;
  background-color: palegreen;
}

.footer {
  grid-area: footer;
  background-color: palevioletred;
}

.gridContainer {
  display: grid;
  grid-template-areas: "header header header header header" "filter items items items aside" "footer footer footer footer footer";
}

.gridContainer>div {
  padding: 20px;
}

.flexContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flexItem {
  background-color: beige;
  margin: 0px 0px 20px 0px;
}

Example 1:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">Items</div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>
<br /><br /><br /> Example 2:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">
    <div class="flexContainer">
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>

    </div>
  </div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>

Answer 1

您需要定义这些百分比，或者默认情况下，内容将定义宽度。只需使每列成为1fr即可获得所需的结果：

.header {
  grid-area: header;
  background-color: coral;
}

.filter {
  grid-area: filter;
  background-color: aquamarine;
}

.items {
  grid-area: items;
  background-color: lightskyblue;
}

.aside {
  grid-area: aside;
  background-color: palegreen;
}

.footer {
  grid-area: footer;
  background-color: palevioletred;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-areas: 
    "header header header header header" 
    "filter items items items aside" 
    "footer footer footer footer footer";
}

.gridContainer>div {
  padding: 20px;
}

.flexContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flexItem {
  background-color: beige;
  margin: 0px 0px 20px 0px;
}

Example 1:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">Items</div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>
<br /><br /><br /> Example 2:
<div class="gridContainer">
  <div class="header">header</div>
  <div class="filter">filter</div>
  <div class="items">
    <div class="flexContainer">
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>
      <div class="flexItem">
        <img src="https://picsum.photos/150" />
      </div>

    </div>
  </div>
  <div class="aside">items</div>
  <div class="footer">footer</div>
</div>