Divs not stacking vertically when shrinking browser using flexbox-CodePudding

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 >
  <div >
    <a href="#">
      <img width="400" height="400" src="https://placekitten.com/400/400" />
    </a>
    <div >
      <a href="#">Cheetah</a>
    </div>
    <div >
      The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
    </div>
    <div>
      <a href="#">Learn more</a>
    </div>
  </div>

  <div >
    <a href="#">
      <img width="400" height="400" src="https://placekitten.com/400/400" />
    </a>
    <div >
      <a href="#">Cheetah</a>
    </div>
    <div >
      The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
    </div>
    <div>
      <a href="#">Learn more</a>
    </div>
  </div>

  <div >
    <a href="#">
      <img width="400" height="400" src="https://placekitten.com/400/400" />
    </a>
    <div >
      <a href="#">Cheetah</a>
    </div>
    <div >
      The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
    </div>
    <div>
      <a href="#">Learn more</a>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <a href="#">
      <img width="400" height="400" src="https://placekitten.com/400/400" />
    </a>
    <div >
      <a href="#">Cheetah</a>
    </div>
    <div >
      The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
    </div>
    <div>
      <a href="#">Learn more</a>
    </div>
  </div>

  <div >
    <a href="#">
      <img width="400" height="400" src="https://placekitten.com/400/400" />
    </a>
    <div >
      <a href="#">Cheetah</a>
    </div>
    <div >
      The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
    </div>
    <div>
      <a href="#">Learn more</a>
    </div>
  </div>

  <div >
    <a href="#">
      <img width="400" height="400" src="https://placekitten.com/400/400" />
    </a>
    <div >
      <a href="#">Cheetah</a>
    </div>
    <div >
      The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
    </div>
    <div>
      <a href="#">Learn more</a>
    </div>
  </div>
</div>