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.

The width available for words gets small because you've set the image width to 200px so at 300px minimum width, there's only 100px left for the text. You can either increase the minimum width or set the image size as a % of the container so the image scales with screen size too. You could also use a media query to control when the grid breaks on to a new line. — Adam, Nov 14 '22 at 12:40
When you say you dont want the text to squish down, what do you want to happen? For the bit left for text to be a minimal fixed amount, for the image to squish down or... You have the width of the text part at 1fr at the moment. — A Haworth, Nov 14 '22 at 13:48
@AHaworth I want the text to not squish down when the width of the screen decreases, it should stay in line with the image. — Liquorice, Nov 14 '22 at 14:10
So are you prepared for the font-size to diminish and/or the dimensions of the image to diminish and/or to fix the width of the text element but not the image element or...? — A Haworth, Nov 14 '22 at 15:26

score 0 · Accepted Answer · answered Nov 14 '22 at 20:01

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>

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

1 Answers1