CODEWITHSUNDEEP
javascriptangularcsscss-grid
jhx
jhx

Reputation: 90

Limit number of rows in CSS grid

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

Upvotes: 1

Views: 1808

Answers (1)

Guerric P
Guerric P

Reputation: 31805

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

Upvotes: 1

Related Questions