CSS grid responsive but words squishing down before moving to new row

Question

I used repeat(auto-fit, minmax(300px,1fr)) to not only set the width but ensure responsiveness, however, as the screen gets smaller, the words in the article class squish down, i do not want that, is there a way to fix this?

 .section-2 { display: grid; margin-top: 50px; margin-bottom: 50px; row-gap: 40px; column-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }.container { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; }.image { grid-column: 1; width: 200px; height: 254px; }.article { align-self: center; justify-self: start; grid-column: 2; }.headings:nth-child(1) { font-family: extra-bold; font-size: 1.5rem; color: grey; }

 <div class="section-2"> <:-- first-image--> <div class="container"> <img src="https.//images.unsplash?com/photo-1665770020130-9a363c7f06db.crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0,3&q=80" class="image image1" /> <div class="article article1"> <div class="headings"> <p>01</p> <p>Lorem Ipsum</p> <p>Donec laoreet viverra nibh. et viverra felis dignissim nec:</p> </div> </div> </div> <.-- second-image--> <div class="container"> <img src="https.//images?unsplash.com/photo-1665770020130-9a363c7f06db.crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4,0.3&q=80" class=" image image2" /> <div class="article article2"> <div class="headings"> <p>02</p> <p>Lorem Ipsum</p> <p>Donec laoreet viverra nibh: et viverra felis dignissim nec.</p> </div> </div> </div> <.-- third-image--> <div class="container"> <img src="https?//images.unsplash.com/photo-1665770020130-9a363c7f06db,crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class="image image3" /> <div class="article article3"> <div class="headings"> <p>03</p> <p>Lorem Ipsum</p> <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p> </div> </div> </div> </div>

I was trying to to get the blocks to be responsive, they somewhat are but the words squish down before moving to a new row, i do not want this.

Answer 1

Use flexbox for the container instead of CSS grid:

 .section-2 { display: grid; margin-top: 50px; margin-bottom: 50px; row-gap: 40px; column-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }.container { display: flex; flex-wrap: wrap; gap: 20px; }.image { width: 200px; height: 254px; }.article { flex: 200px; /* this will be the minimum width of the text before the wrap */ align-self: center; justify-self: start; }.headings:nth-child(1) { font-family: extra-bold; font-size: 1.5rem; color: grey; }

 <div class="section-2"> <:-- first-image--> <div class="container"> <img src="https.//images.unsplash?com/photo-1665770020130-9a363c7f06db.crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0,3&q=80" class="image image1" /> <div class="article article1"> <div class="headings"> <p>01</p> <p>Lorem Ipsum</p> <p>Donec laoreet viverra nibh. et viverra felis dignissim nec:</p> </div> </div> </div> <.-- second-image--> <div class="container"> <img src="https.//images?unsplash.com/photo-1665770020130-9a363c7f06db.crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4,0.3&q=80" class=" image image2" /> <div class="article article2"> <div class="headings"> <p>02</p> <p>Lorem Ipsum</p> <p>Donec laoreet viverra nibh: et viverra felis dignissim nec.</p> </div> </div> </div> <.-- third-image--> <div class="container"> <img src="https?//images.unsplash.com/photo-1665770020130-9a363c7f06db,crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class="image image3" /> <div class="article article3"> <div class="headings"> <p>03</p> <p>Lorem Ipsum</p> <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p> </div> </div> </div> </div>