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?

Media queries are pure CSS, and without it or JavaScript, you cannot achieve the behavior you are describing. — Mers
– Mers, Commented Dec 30, 2018 at 15:01

Henrique Erzinger · Accepted Answer · 2019-10-03 22:05:31Z

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>

demitinay · Accepted Answer · 2019-01-08 16:02:51Z

0

Using Flexbox instead of Grid will solve what you want to achieve.

With flexbox you can specify how each element should occupy space by defining flex-grow.

Referece: Flexbox Comprehensive guide

I created a quick example here:

Working example

.flex-me{ 
   display: flex; 
   flex-flow: wrap; 
}

.flex-me .thumb img{
   width: 100%;
}

.flex-me p{
  flex: 2;
}

What this does is:

Retain original image size but only allow it to grow as large as browser width
Ensure that the text will always occupy twice as much space as the image flex: 2
If the image size is more than the space that the text is defined to grow, wrap to the next line flex-flow: wrap

answered Jan 8, 2019 at 16:02

demitinay

863 bronze badges

1 Comment

hey00 Over a year ago

Thanks for the answer, but your example doesn't do what I want. The picture doesn't change size as I'd want. I'll use media queries.

Collectives™ on Stack Overflow

Dynamic number of columns in CSS grid, with different widths

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related