Display flex is overriding display grid layout - html

Question

I'm having trouble with my display grid layout when I include a display flex layout within it.
In my first example, I have my grid layout as I would like it. It is divided into 5 columns, the header takes up 100%, the footer 100%, and between them I have a filter element taking 20%, an items element taking 60%, and an aside element taking the other 20%. This works great.
However, in my seconds example, I've added a flex item within the items grid. When I do this, the filter and the aside elements no longer retain the intended 20%, and the items element becomes much larger. It seems as if the display flex is overriding
the display grid. I assume that this happens because both the display grid and display flex elements are taken out of the normal document flow.
So my question is, how do I use the display flex element with my grid's items element without losing the grid's intended layout (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

You need to define those percentage or by default the content will define the width. Simply make each column to be 1fr to have the needed result:
.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>