Divs not stacking vertically when shrinking browser using flexbox - html

Question

For whatever reason I can't figure this simple thing out. I've 3 divs that I want to stack when shrinking the browser using flexbox, however I must be missing something. Any insight would be appreciated. I merely want to just make these responsive & have actually done this before but maybe I am going crazy :).
.container {
position: relative;
display: grid;
justify-content: center;
align-items: center;
flex-direction: row;
}
.item {
margin: 3px;
padding: 10px 0 0 10px;
display: grid;
flex-direction: row;
}
.item img {
max-width: 100%;
height: auto;
}
.description {
font-family: 'Nunito', sans-serif;
color: #000;
}
<div class="container">
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="type">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
</div>

Answer 1

Use grid-template-columns: repeat(auto-fill, 150px); to have a CSS grid layout that automatically adapts to the viewport size without needing to hardcode #media rules.
For example:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
gap: 1em;
}
.item {
margin: 3px;
padding: 10px 0 0 10px;
display: flex;
flex-direction: column;
}
.item img {
max-width: 100%;
height: auto;
}
.description {
font-family: 'Nunito', sans-serif;
color: #000;
}
<div class="container">
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="type">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
</div>