显示 flex 覆盖显示网格布局

Question

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

在我的第一个示例中，我有我想要的网格布局。它分为 5 列，页眉占 100%，页脚占 100%，在它们之间我有一个 filter 元素占 20%，一个 items 元素占 60%，还有一个 side 元素占另外 20%。这很好用。

但是，在我的第二个示例中，我在项目网格中添加了一个弹性项目。当我这样做时，过滤器和备用元素不再保留预期的 20%，并且项目元素变得更大。似乎显示 flex 是压倒一切的 显示网格。我认为发生这种情况是因为显示网格和显示 flex 元素都从正常的文档流中取出。

所以我的问题是，如何在不丢失网格的预期布局的情况下将 display flex 元素与网格的 items 元素一起使用（filter-20% items-60% side-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>