Дисплей flex имеет приоритет над макетом сетки дисплея

Question

У меня проблемы с компоновкой сетки дисплея, когда я включаю в нее компоновку флекс дисплея.

В моем первом примере у меня макет сетки, как мне бы хотелось.Он разделен на 5 столбцов, верхний колонтитул занимает 100%, нижний колонтитул - 100%, и между ними у меня есть фильтрующий элемент, занимающий 20%, элемент items - 60%, а дополнительный элемент - 20%.Это прекрасно работает.

Однако в моем примере с секундой я добавил гибкий элемент в сетку предметов.Когда я делаю это, фильтр и вспомогательные элементы больше не сохраняют запланированные 20%, а элемент items становится намного больше.Кажется, что дисплей flex перекрывает сетку дисплея.Я предполагаю, что это происходит из-за того, что и сетка дисплея, и элементы Flex отображения выводятся из обычного потока документов.

Поэтому мой вопрос заключается в том, как использовать элемент Flex Flex дисплея с элементом items моей сетки, не теряяПланируемое расположение сетки (фильтр-20% элементов-60% в стороне-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>