Gap below image in CSS Grid
How do I avoid the gap below the image.
I'm using
max-width:100%
display: block;
If this information is not enough. I'll share codepen.
Thanks in advance
26 Replies
looks like the images aren't tall enough to fit in the grid
looks like you've got the tall images spanning two grid cells, and the short images only one, which would mean the short images need to be ~half the height of the tall ones (plus or minus some maths)
Im using
for tall images I need to use for short right?
for tall images I need to use for short right?
I'm not that familiar with grid layouts, honestly. I'm just noting that the images can't fill the entire grid cell if they're not the same size
Object-fit: cover. Could help you will crop some of them but I what try
https://codepen.io/ahad4387/pen/xxjzEbV?editors=1100
please check
@abdulahad Try adding
min-height: 100%;
to your <img>
taggot it. thank you so much.😁
been trying for 2-3 hrs.
Yea you need a height for cover to work https://codepen.io/b1mind/pen/VwxdKXQ
I heard using
height
was bad practice, but I assume min-height
is okay right? Or na?setting strict heights is typically bad ya. Always if you know why you can choose if you need.
but yea min-height lets content grow still
👌
I'm getting it again, don't know why
What if you use
height: 100%;
instead?it's same
before the gap was for every image.
Now, it's only for single row, in all pages
if the image is the grid-item, then
should work
div is the grid item
img is under div
If you have an aspect-ratio pattern you could try that as well.
aspect-ratio: 1/2;
or aspect-ratio: 2/1;
depending on your needs.div is the grid, the images are the items, that's what i meant
So i should remove the divs and make img as item directly
that is not the same as the codepen
please share the css part of that too
remove the heights
sorry about that
got it. Thank you so much
if you really want 350px rows then you can use
grid-auto-rows: 350px
on .img-grid{}
but my advise is not to do, if not necessary
the grid-auto-flow: dense
is a bit redundant in this scenario
and grid-row: span 2
is enough ( without / auto)
also the class .hs1 is not really nessessary, it allready has the default beheaviourUnderstood. Corrected them.
You guys go far beyond to help us. This community is awesome. Again, Thank you