0

I'm building a responsive webpage. Im using Flexbox and Grid for most of my layouts. Mostly, everything works ok, but I've run into some complex layouts and i'm wondering if using Grid is the way to go.

Basically, my design starts with a simple layout.

<div class="grid">
    <div class="g-cover">COVER</div>
    <div class="g-heading">HEADING</div>
    <div class="g-details">DETAILS</div>
    <div class="g-media">MEDIA</div>
    <div class="g-comment">COMMENT</div>
</div>


.grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-gap: 40px;
}

That looks like this

enter image description here

So far so good. The problem is when I try to expand the page and move the grid's children around. I can't get it to work the way I want it... and im wondering if the Grid is the right tool for this.

For example, when I expand the page I want the Grid to look like this:

enter image description here

The grid's children height are dynamic, so sometimes it looks like this (notice the media is shorter):

enter image description here

Searching here, I've came up with this model that doesn't work...

@media screen and (min-width: 768px) {

    .g-cover {
        grid-area: cover;
    }

    .g-heading {
        grid-area: heading;
    }

    .g-details {
        grid-area: details;
    }

    .g-media {
        grid-area: media;
    }

    .g-comment {
        grid-area: comment;
    }

    .grid {
        grid-template-columns: 40% auto;
        grid-template-rows: auto;
        grid-template-areas:
        "cover heading"
        "cover media"
        "details media"
        ". comment"
    }
}

Am I going the wrong path? Is Grid the correct tool for what I'm trying to achieve. I just need guidance from the experts coz I've spent days trying to figure this one out.

Marco
  • 2,687
  • 7
  • 45
  • 61
  • Ok, so if I am correct, after reading the answer, `The width and height of grid items must be known in order to close gaps with surrounding items. So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case.` In other words, using pure GRID is not possible. Either I use javascript or the good old floating css options. Is this correct? – Marco May 18 '20 at 20:38
  • Try `grid-template-rows: repeat(4, 1fr);` or `grid-auto-rows:1fr;` instead of `grid-template-rows: auto;` inside the media quesry – Rainbow May 18 '20 at 20:47

0 Answers0