Items overflowing last row of grid

Help
1

I’m trying to build a photo gallery with different size images in css grid. The images in the last row of the grid are overflowing.

Solutions I’ve found when searching suggest setting the grid items to min-width: 0px; but this doesn’t do anything.

The grid is nested and current iteration looks like this:

.gallery {
  grid-column: 2 / 8;
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-rows: max-content;
  gap: inherit; 
}

I’m losing my mind here, does anyone know what I can try to fix this?

2

I’m not as familiar with CSS grid as I probably should be since this is part of what I do for a living (probably because my day job is still stuck on Bootstrap).

However, you’ve applied a grid layout to <body>, another to .gallery, and you have grid CSS applied to classes like .image1, .image2, etc. It might be worthwhile to try removing the image classes.

Also, grid might not be the best solution for this gallery. Flexbox might be more suitable, and it’s what I’d try first. Here’s a blog post showing a few approaches to building a photo gallery using flexbox.

It might also be worthwhile to check out Solved By Flexbox for more layout ideas.

I did notice your .gallery img rule. This won’t solve your main problem, but it should help you display photos without mangling the aspect ratio.

.gallery img {
  max-width: 100%;
  height: auto;
}

I also noticed that you’re not specifying widths or heights in your <img> elements. This is necessary if you want your HTML to validate, and it also helps with lazy loading since the browser can lay out elements immediately while reserving space for images it hasn’t loaded yet.

Alt tags would be nice to have, as well, for the benefit of people using screen readers or in case an image goes missing (since your images are hosted outside Neocities).

For example, here’s one of your images.

<img class="image1"
     src="https://picsum.photos/300/200?grayscale" 
     loading="lazy">

You would specify dimensions in the <img> element as follows:

<img class="image1" 
     src="https://picsum.photos/300/200?grayscale"
     width="300" 
     height="200" 
     alt="add a description here for people with poor vision"
     loading="lazy">
2 Likes
3

Thanks for taking a look at it!

Yeah I should probably say that it’s a subgrid of a grid declared on the homepage. So the gallery is a nested grid and the images in there have the grid-column: on them for specified placements, and that all went well up until the last row of the grid…

I think there is something I am not getting here in terms of how content generates sizes or something.

I wanted to try a grid to the site that I could use on all subpages and basically practice using css grid. But you’re right, for this page flexbox probably would be easier/better so I might just do that in order to complete the layout.

Will add alt tags once I replace the placeholder images with the real ones :slightly_smiling_face:

And good idea about adding width to each img. Would width="300" height="200" render as pixels or other units or just aspect ratios? I’m wondering since I want it to be responsive too…

4

The width and height attributes on <img> are in pixels. However, the CSS I gave you should make them responsive since it’ll set the image width to that of its container and adjust the height proportionally.

1 Like
5

Update in case someone has this issue in the future and reads this.

I found the culprit and it was that gap was set to inherit on the subgrid. Apparently that causes some unpredictability, and I solved it with replacing it with a px value. Looks like the same issue happens with % so needs to not have a relative size unit but a constant one like px.

1 Like
6

If you set a font size in the html element, you might be able to get away with rem units, too.

7

That’s a really good tip, thank you!

I tested it and even if I set html {font-size: 100%;} - and not a px value, it seems to do the trick.

1 Like
8

You’re welcome, but I would suggest using the following instead:

html {
    font-size: medium;
}

This is an absolute font size that will set the root font size to be the browser’s default, which is usually 16px unless the user has adjusted their browser settings. The percentage you’re using is still a relative value.

See CSS font-size on MDN for additional details.

9

Hmm, I saw someone on Stack Overflow that said best practice would be to set a percentage value and even better to not override the root size at all due to accessibility reasons. (But I guess you can find all kinds of statements on SO.)

From the page you linked on MDN it looks like your method is better if I understand what I’m reading correctly. So medium would be an absolute size, and corresponds to the user’s default setting.

I’m setting it to medium!

I wonder if it’s a good idea to do this all the time, as best practice, or is it better to leave it and only define the font-size if there are any other issues that occur…?

10

I’ve found that for responsive design it’s best to set html’s font-size to medium and then consistently use rem units for sizing. This ensures that all elements are proportionately resized when somebody uses their browser’s zoom function.

If you were to visit my own website at starbreaker.org, I think you would find it readable on smartphones, tablets, laptops, and desktops alike. That’s because I use the approach I explained above.

11

That sounds like a solid method, and really good to know. Thanks again!!

1 Like