CSS Grid - Changing column stack for particular columns

[Shoxt3r]

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!

[SamA74]

@Shoxt3r

On mobile the first column should disappear as it isn’t needed.

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?

[PaulOB]

@Shoxt3r

However, for 992px and below I want to stack the second and third columns only, but keep the first column full-height.

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";
    }
}

[Shoxt3r]

@PaulOB

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

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:

Thanks both!