Dynamic number of columns in CSS grid, with different widths

Question

I'm trying to create a simple (I think) layout using css grid, but I can't find how to do it.

Basically, I want to have an image and text side by side. When the width of the containing grid is too small, the text goes below the image and both take 100% width.

That's easy to do with grid-template-columns: repeat(autofit, minmax(300px, 1fr)): https://codepen.io/anon/pen/vajYZM

The problem is that when the image and text are side by side, I want the text to be twice as large. I can do that with grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr) but then the text never goes below the image and I have an overflow.

I think I'd be able to do it if I used grid-template-columns: repeat(autofit, minmax(200px, 1fr)) and grid-column: span 2 on the text element, but then I'd have to apply the same span 2 on the image once the text goes below.

Is possible to target the last element of a grid row in CSS?

I know I can use media queries to change the grid-template-columns, but I'd rather use pure CSS when I can. Basically, is it possible to explicitly define columns in grid and have the columns disappear if they don't have the place to fit?

Or is it possible in another way that I missed?

Answer 1

With auto-fit or auto-fill, all columns of the grid will always be the same size, as the browser will distribute the available space equally. Using grid, you'll have to use a media-query to do what you want, but about that...

I know I can use media queries to change the grid-template-columns, but I'd rather use pure CSS when I can.

...media-queries ARE pure css, so you don't need to worry.

Have a snippet:

.container {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 2fr;
  grid-gap: 24px;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.img {
  width: 100%;
}

<div class="container">
  <img class="img" src="http://via.placeholder.com/350x150">
   
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>