CSS Grid - Changing column stack for particular columns

Hi there,

I’m just starting out with CSS grid mainly because I want the ability to switch the content order around easily. I’ve got a layout whereby above 992px the columns take up a third of the screen each. However, for 992px and below I want to stack the second and third columns only, but keep the first column full-height.

On mobile the first column should disappear as it isn’t needed. Below is what I have so far:
https://codepen.io/Shoxt3r/pen/bGGKeVW

Many thanks!

It looks like you currently have the second column doing exactly that instead of the first one.
So don’t you simply move the .hidden-xs class to the first column?

Did you mean like this?

@media(max-width:992px){
    .container{
        grid-template-columns: minmax(50%, 50%);
        grid-template-areas: 
          "promoImage promoMessage promoMessage"
          "promoImage promoCTAs promoCTAs";
    }
}
1 Like

Sorry for confusion, I was actually referring to the “image” column, which starts as the second column and switches to the first column on the 992 breakpoint.

@PaulOB - That’s exactly what I was looking for! Like I say still getting to grips with CSS Grid, not used to the syntax yet but that makes sense to me now.

New pen below:
https://codepen.io/Shoxt3r/pen/zYYLPNJ

Thanks both!

1 Like