css grid empty white space
hi guys how do you make this forth and 6th images takes up the whitespace above them? i used display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 51px;
margin: 0 auto;
max-width: 1390px;
3 Replies
I would try wrapping each column in a separate div. Grid will put overflow on a new row, so you see these gaps. The grid-area property can be used instead.
There are also libraries and probably many ways to do this, if you look for "masonry layout".
if you know if the image is landscape/portrait you could span the portraits over 2 rows
i have solved this problem already i just use grid-row to span them and i also add 100% on its width and height and define columns but not the rows. and now here is the result
