CODEWITHSUNDEEP
htmlcssgrid-layoutcss-grid
Marco
Marco

Reputation: 2737

CSS Grid: Don't expand grid items

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.

Upvotes: 2

Views: 4390

Answers (3)

Facundo Corradini
Facundo Corradini

Reputation: 3913

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 ;)

Upvotes: 1

Facundo Corradini
Facundo Corradini

Reputation: 3913

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.

Upvotes: 3

Facundo Corradini
Facundo Corradini

Reputation: 3913

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/

Upvotes: 1

Related Questions