Kevin Powell - Community•2y ago

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

Jochem•2y ago

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)

Abdul Ahad⚡•2y ago

Im using

  grid-row: span 2 / auto;

  grid-row: span 2 / auto;

for tall images I need to use

  grid-row: span 1/ auto;

  grid-row: span 1/ auto;

for short right?

Jochem•2y ago

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

b1mind•2y ago

Object-fit: cover. Could help you will crop some of them but I what try

Abdul Ahad⚡•2y ago

https://codepen.io/ahad4387/pen/xxjzEbV?editors=1100 please check

rezabet•2y ago

@abdulahad Try adding min-height: 100%; to your <img> tag

Abdul Ahad⚡•2y ago

got it. thank you so much.😁 been trying for 2-3 hrs.

b1mind•2y ago

Yea you need a height for cover to work https://codepen.io/b1mind/pen/VwxdKXQ

rezabet•2y ago

I heard using height was bad practice, but I assume min-height is okay right? Or na?

b1mind•2y ago

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

rezabet•2y ago

👌

Abdul Ahad⚡•2y ago

I'm getting it again, don't know why

Myndi•2y ago

What if you use height: 100%; instead?

Abdul Ahad⚡•2y ago

it's same

Abdul Ahad⚡•2y ago

before the gap was for every image. Now, it's only for single row, in all pages

MarkBoots•2y ago

if the image is the grid-item, then

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

should work

Abdul Ahad⚡•2y ago

div is the grid item img is under div

Myndi•2y ago

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.

MarkBoots•2y ago

div is the grid, the images are the items, that's what i meant

Abdul Ahad⚡•2y ago

So i should remove the divs and make img as item directly

MarkBoots•2y ago

that is not the same as the codepen please share the css part of that too

Abdul Ahad⚡•2y ago

img{
    max-width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.img-grid2{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    /* grid-auto-rows: auto 1fr; */
    grid-auto-flow: dense;
}
.hs2{
    height: 700px;
    grid-row: span 2 / auto;
}
.hs1{
    height: 350px;
    grid-row: span 1 / auto;
}

img{
    max-width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.img-grid2{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    /* grid-auto-rows: auto 1fr; */
    grid-auto-flow: dense;
}
.hs2{
    height: 700px;
    grid-row: span 2 / auto;
}
.hs1{
    height: 350px;
    grid-row: span 1 / auto;
}

MarkBoots•2y ago

remove the heights

Abdul Ahad⚡•2y ago

sorry about that got it. Thank you so much

MarkBoots•2y ago

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 beheaviour

Abdul Ahad⚡•2y ago

Understood. Corrected them. You guys go far beyond to help us. This community is awesome. Again, Thank you

Gaming

Programming

Gap below image in CSS Grid