Using Flexbox/Grid in CSS, making images stack on mobile - html

Question

I'm trying to master the grid layout in CSS3. I want to write some HTML/CSS that enable the my 3x1 grid to stack when viewed on mobile. For now, the squares just keep shrinking until they're small. I've been able to work with mobile CSS before, but working with grids are new to me. Can anyone offer some pointers or suggestions?
Here's my code:
HTML:
<div class="container">
<div class="grid">
<div class="cell">
<img src="https://www.easycalculation.com/area/images/big-square.gif">
</div>
<div class="cell">
<img src="https://www.easycalculation.com/area/images/big-square.gif">
</div>
<div class="cell">
<img src="https://www.easycalculation.com/area/images/big-square.gif">
</div>
</div>
CSS:
.container {
width: 100%;
margin: 0 auto;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.cell {
flex: 0 0 32%;
margin-bottom: 5px;
}
img {
max-width: 100%;
height: auto;
}
body {
background-color: #dedede;
}
Here's a CodePen link as well: https://codepen.io/anfperez/pen/QrEBLZ

Answer 1

Try this CSS:
(codepen https://codepen.io/bonniemellott/pen/ELypzm)
.container {
width: 100%;
margin: 0 auto;
}
.grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.cell {
//removed flex attribute
margin-bottom: 5px;
}
img {
max-width: 100%;
height: auto;
}
body {
background-color: #dedede;
}

Answer 2

Add this to your css
You will have to use media query for stacking the boxes.
The way u can do this is by setting the flex-direction:column on smaller devices
#media (max-width: 768px) { /*You can decrese this number if you want only on small devices*/
.grid {
flex-direction: column;
}
}
Here is the updated codepen link