Limit number of rows in CSS grid

Question

Good morning,

I'm currently trying to implement an image gallery based upon the new CSS grid. In detail, I only want to display one row initially and let the user then expand more and more images by clicking a Show more button.

This is how it looks so far: https://stackblitz.com/edit/angular-96bdii?file=src%2Fapp%2Fgallery.component.ts

Now, my problem is that real-world images (instead of colored divs) need more time to be loaded completely. Therefore, the ngViewAfterInit hack doesn't work as the total width is not correct at the time ngViewAfterInit is called. Also, the total width is automatically calculated by a flexbox layout so I essentially don't know it (early).

Could you imagine a better (working) solution that perhaps uses CSS grid techniques I'm not aware of to limit the number of rows to one?

Kind regards

Guerric P · Accepted Answer · 2018-07-05 10:20:46Z

1

You could retrieve your images programmatically like this:

var img = new Image();
img.onload = function() {
  //retrieve this.width
}
img.src = 'http://www.example.com/image.gif';

Then use it to compute the right width and photosPerRow

answered Jul 5, 2018 at 10:20

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Limit number of rows in CSS grid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related