2

I'm creating a design for mobile and for desktop. When on mobile, all elements are stack on top of each other. When on desktop, elements are in 2 columns. Elements have different order when on mobile and on desktop.

enter image description here I thought of creating that using CSS grid.

HTML

<div class="grid-release">
    <div class="gi-cover">cover</div>
    <div class="gi-detail">detail</div>
    <div class="gi-head">head </div>
    <div class="gi-desc">desc</div>
    <div class="gi-media">media</div>
    <div class="gi-comment">comment</div>
</div>

CSS

.grid-release {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "head"
    "cover"
    "detail"
    "desc"
    "media"
    "comment";
    grid-gap: 10px;
}

.grid-release .gi-cover {
    grid-area: cover;
    background-color: red;
}
.grid-release .gi-detail {
    grid-area: detail;
    background-color: yellow;
}

.grid-release .gi-head {
    grid-area: head;
    background-color: cyan;
}
.grid-release .gi-desc {
    grid-area: desc;
    background-color: chartreuse;
}
.grid-release .gi-media {
    grid-area: media;
    background-color: orange;
}

.grid-release .gi-comment {
    grid-area: comment;
    background-color: darkkhaki;
}

@media screen and (min-width: 400px) {
    .grid-release {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto;
        grid-template-areas:
        "cover head"
        "detail desc"
        ". media"
        ". comment"; 
    }
}

... and the result:

https://jsfiddle.net/q3hpr0ak/

Here's my problem. When on desktop and the cover grid item expands, so does the head grid item.

https://jsfiddle.net/z5jhewhb/1/

When the detail grid item expands, so does the desc grid item

https://jsfiddle.net/Lh2y2pzp/2/

and so on...

Obviously, that creates a very ugly layout. I'm starting to think that maybe CSS grid is the wrong approach. I need guidance. I've been playing with this all morning with no success.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Marco
  • 2,687
  • 7
  • 45
  • 61

3 Answers3

2

If you want to keep the left items height independent from the right items on the same row, that's pretty much the exact opposite of what grid is designed to do.

Actually any other layout will do better. For instance, here's one using flexbox, so we can set the order of the elements.

Make sure to add 

    align-items:flex-start;

so they won't stretch to match the divs beside

https://jsfiddle.net/q3hpr0ak/2/

As you can see, switching the flex-flow from column (one on top of the other) for mobile to row-wrap for desktop allows to easily switch the layouts, while the "order" property and some simple margins guarantee every item is right where it should.

Facundo Corradini
  • 3,825
  • 9
  • 24
  • look what happens, on desktop, when the cover grid area expands, the head also expands... https://jsfiddle.net/yu1xb1q1/2/ Plus, if you notice my question, the grid areas on desktop and mobile have a different order – Marco Feb 06 '18 at 17:15
  • @Marco you can set the order to whatever you want. In my example, I was switching the head from third to second, thought you could find out the rest on your own. Anyway, just edited my answer to the exact order you wanted – Facundo Corradini Feb 06 '18 at 17:23
  • 1
    As for the expansion, the head is not expanding, the spacing is. If you want completely independent left and right columns... then you should use precesily that: independent left and right divs, then lay out the internal items as you'd like. But at that point you'll loose flexibility on the items positioning – Facundo Corradini Feb 06 '18 at 17:26
  • I need total independent left and right columns. It makes no sense to have a left grid area half empty because one of the right areas expands... and vice-versa. From what I can see, the grid and flexbox solution almost work, but not the way i want it. I feel like there is no solution to a very basic problem – Marco Feb 06 '18 at 17:45
  • 1
    @Marco the moment you needed to move the order of items with unknown height around, it stops being a *very basic problem*. CSS is full of very basic things that should be a million times easier than they are, but I don't think this is one of them – Facundo Corradini Feb 06 '18 at 17:55
1

The true challenge here is the changing position of the header. You can sort of get away with the simplest of grids, a 1fr - 2fr left and right columns with 1 row each, IF you have a known height header to use in the margin for the next item.

@media screen and (min-width: 700px) {
  .container{
    grid-template-columns:1fr 2fr;
    grid-template-rows:1fr;
    grid-template-areas:"left right";
  }

https://jsfiddle.net/xoob00kn/

Facundo Corradini
  • 3,825
  • 9
  • 24
  • Thanks for your dedication. I may have to rethink my layout so it works with either a grid and/or flexbox. – Marco Feb 06 '18 at 19:01
1

I just gave this a second thought... and the asnwer couldn't be simpler: use good ol' floats for desktop, flex for mobile so you can re-order items as needed:

@media screen and (min-width: 700px) {
  .container { display:block; }
  .cover, .detail{ width:33%; }
  .head, .desc, .media, .comment { width:66%; float:right; }
}

https://jsfiddle.net/q3hpr0ak/3/

check the jsfiddle, I think it'll work just fine this time ;)

Facundo Corradini
  • 3,825
  • 9
  • 24