Kevin Powell - Community•8mo ago

Creating a responsive grid which always maintains the same gap

I'm trying to create a grid, kind of like the iPhone photo library. There's a gap that can never increase. So for responsiveness the items in the grid need to increase in size. How would I achieve this? :)

12 Replies

MarkBoots•8mo ago

Don't really understand what it should look like. Can you show a screenshot of what you want?

TheBugCoderOP•8mo ago

Sorry, I want the horizontal gap to always be the same as the vertical gap. I set the grid-gap to 0.05rem. So if possible, I want to increase the size of the images or set a max width so that the gap is 0.05rem. :)

TheBugCoderOP•8mo ago

Right now, this is my code:

.product-grid {
    display: grid;
    grid-gap: 0.05rem;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
  }

MarkBoots•8mo ago

try

.product-grid{
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}
.product-grid > img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.product-grid{
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}
.product-grid > img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

https://codepen.io/MarkBoots/pen/jOoOvWv

MarkBoots•8mo ago

TheBugCoderOP•8mo ago

Thanks, I got it working! Sorry, one more question :) Would it be possible to always have an uneven amount of columns?

MarkBoots•8mo ago

poeh, good one. There's nothing I can think of. Maybe with some really clever maths, nothing standard (or with a lot of media queries, but that takes away the auto-fill purpose)

TheBugCoderOP•8mo ago

Oh, all right, thanks though!

MarkBoots•8mo ago

you can do this, but it won't go smaller than 3 cols. so you'll need a media query for smaller widths

.product-grid{
  display: grid;
  gap: 0.5rem;
  --column: minmax(160px, 1fr);
  grid-template-columns: var(--column) repeat(auto-fill, var(--column) var(--column));
}
.product-grid > img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.product-grid{
  display: grid;
  gap: 0.5rem;
  --column: minmax(160px, 1fr);
  grid-template-columns: var(--column) repeat(auto-fill, var(--column) var(--column));
}
.product-grid > img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

here with media query https://codepen.io/MarkBoots/pen/rNgNZKV

MarkBoots•8mo ago

TheBugCoderOP•8mo ago

🙏 Thank you so much, this is great!

MarkBoots•8mo ago

no problem, learned something myself too

Gaming

Programming

Creating a responsive grid which always maintains the same gap

Did you find this page helpful?