0

I know the different approaches to a masonry layout. Here, I’m working with images which dimensions are known. For quite long I’ve used a layout based on absolute positions, with success. But I’d like to gain some flexibility. I’m currently exploring an alternate way based on CSS grid layout.

So I’m using CSS Grid to layout images of different heights in two columns. Images positions in the grid are explicit. Images are set to span one or more rows depending on there height compared to other images. I’d like my columns not to have any empty space in them. But in the resulting layout, some of the rows heights are bigger than necessary to account for the content.

I’ve built an example using aspect-ratio to mimic images intrinsic ratio and a reduce set of items:

<style>
    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
        margin: 10px;
        padding: 0;
    }

    li {
        align-items: center;
        background: lightgrey;
        border: 2px solid red;
        display: flex;
        flex-flow: column;
        font-size: 24px;
        justify-content: center;
    }

    li:nth-child(1) {
        grid-area: 1/1/2/2;
    }

    li:nth-child(2) {
        grid-area: 1/2/3/3;
    }

    li:nth-child(3) {
        grid-area: 2/1/4/2;
    }

    li:nth-child(4) {
        grid-area: 3/2/5/3;
    }

    li:nth-child(5) {
        grid-area: 4/1/6/2;
    }
</style>
<ul>
    <li style="aspect-ratio:0.87086092715232">1</li>
    <li style="aspect-ratio:0.63680387409201">2</li>
    <li style="aspect-ratio:1.5748502994012">3</li>
    <li style="aspect-ratio:0.7874251497006">4</li>
    <li style="aspect-ratio:0.63680387409201">5</li>
</ul>

Here is what I get:

actual layout

What I want and expected was a solid layout :

expected layout

I can’t understand why, except for the two first rows, the next rows are taller than strictly required to fit the content. My understanding of grid layout is not yet good. I’ve fumbled around fit-content and min-content in the list’s grid-template-rows and item’s height properties without any success.

My issue is really similar to that one, but it is old and does not give a solution to collapse theses gaps. So is there a way to obtain a solid grid layout with auto row heights?

I’m interested in grid layout solutions only.

Jérôme
  • 175
  • 1
  • 10
  • What you are looking for is masonry layout not grid layout. Grid is grid : lines, columns straight. There is a beta masonry option for grid but not yet release. There are different tricks to mimik masonry layout in grid, I would say that "more or less" work! Check CSS tricks website to see that. Otherwise masonry plugin is here https://masonry.desandro.com/ – pier farrugia Jul 26 '23 at 08:55
  • 1
    in your example, you can get the expected result by applying `li { width: 100%; height: 100%; }` and adjusting the gap, in case of `img` you'll probably also need `object-fit: cover` – LS_ Jul 26 '23 at 09:05
  • You *could* do this with Grid if you knew each of the images and their heights in advance, but it's not very efficient. You'd need to set a lot more rows, and have the images span quite a few rows each to find an appropriately sized grid area. – ralph.m Jul 26 '23 at 10:08
  • You could look instead at css column-count. – A Haworth Jul 26 '23 at 14:36
  • I actually know the different approaches to the masonry layout. But knowing the dimensions of my images, I thought I could get a reasonable implementation, without JavaScript. I solved my problem by specifying explicit relative heights for my grid rows. But I’m still wondering why I’m getting this gap between items 3 and 5, and if there’s a way to collapse it without explicit heights. – Jérôme Jul 27 '23 at 10:25
  • @ls Thanks for your answer. I indeed use `object fit: cover` to account for small ratio variations. But due to the amount of empty space in the rows, `height: 100%` changes my images ratios too much. I’d like a way to collapse these empty spaces. – Jérôme Jul 27 '23 at 10:57
  • Could you say why column-count + a bit of fiddling abot with the HTML order if required won't do? – A Haworth Jul 27 '23 at 12:56

0 Answers0