How do I vertically align grid elements with various heights?

Question

My issue is that my grid elements all have various height lengths, which leaves extra space below the row underneath. It looks exactly what I want it to look like on mobile, however, on desktop I can't seem to push the images up where there is extra space.

I have tried using display: flex; align-items: flex-start;, but it still leaves the extra spacing.

Have a look at my website to see: https://eylenkim.github.io/ArtByEylen/Portfolio/portfolio.html

Here is my code:

sample HTML

<div class="grid">
    <div class="item">
        <div class="item-content">
            <img src="myimage1.JPG" style="height:auto; width: 100%">
        </div>
        <div class="item-content">
            <img src="myimage2.JPG" style="height:auto; width: 100%">
        </div>
    </div>
</div>

CSS

.grid {
  position: relative;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  align-items: flex-start;
  margin: 0 5% 0 5%;
}

.item {
  /*position: absolute; */
  max-width: 400px;
  width:400%;
  height: auto;
  z-index: 1;
  transition: transform 0.6s ease;
  cursor: pointer;
  margin: 5px;
  overflow: hidden;
}

img {
  max-width:400px !important;
       -o-object-fit: cover;
  object-fit: cover;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.item img:hover {
  -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
}

.item-content {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100%;
}

Try using `flex-wrap` on your container where all the columns are in. See here: https://developer.mozilla.org/de/docs/Web/CSS/flex-wrap I am usually working with bootstrap for such cases. There you would have a row with flex-wrap and all columns will be the same height. But you have to set the content to 100% height too. — xDrago, Nov 15 '19 at 00:24
@xDrago I already have a flex-wrap on ```.grid``` and for some reason when I try to add ```height:100%``` to ```.item```, the container expands REALLY tall. — Flying Squirrel, Nov 15 '19 at 00:46

score 0 · Answer 1 · edited Jun 07 '22 at 17:55

0

I recently worked with a front end interface that relies quite heavily on flex box . However I needed content for various controls to have exactly the same heights . So I chose to use a grid instead which also is responsive and in addition has a grid gap (so you wont have to add padding to your images)

flex Box was not giving me the same size as other cells ,when cells were pushed down. While in case of Grid, they retain the same size as all other cells in the grid. So it should solve your problem of having that gap at the bottom

_{(source: cloudfront.net)}

Here is the CSS and code to get the grid working

Grid Vs FlexbBox

edited Jun 07 '22 at 17:55

Glorfindel

21,988
13
81
109

answered Nov 15 '19 at 00:43

JonoJames

1,117
8
22

1

I just add that CSS grid is very good for the implementation of the layout combine with media queries. I am used to using flexbox to center the elements in my grids if necessary although CSS grid can do it on its own – Nov 15 '19 at 01:47
It looks much better the gap is gone – JonoJames Nov 15 '19 at 02:07

score 0 · Answer 2 · answered Nov 15 '19 at 00:56

I suggest you have to use flexbox on this. Maybe try using this lines of code on your .grid class:

.grid {
    width: 100%;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: wrap;
    column-count: 5;
    height: auto !important;
}

Then, this line of code on the .item class:

.item {
    height: auto;
    z-index: 1;
    cursor: pointer;
    margin: 5px;
    overflow: hidden;
}

You have too much width on .item and don't forget to have the column-count.

How do I vertically align grid elements with various heights?

2 Answers2