css grid template column elementor make 2 / 1

Question

I want to make ordering as on my photo. I maded blog page with elementor and need to change with css grid template column.

Code is:

   .elementor-grid-2 .elementor-grid {
    grid-template-columns: repeat(1,1fr);
}

I want to make first appear 2 on 1 like photo :) Any help will be appreciated!

@Paulie_D I need them to changed dynamically like photo: 1 -> 2 -> 1 -> 2 — Vladimir Kyatipov, Feb 17 '21 at 16:05
So? You just set them to span two columns - https://stackoverflow.com/questions/36470038/how-to-exclude-the-first-item-in-a-flexbox-wrap — Paulie_D, Feb 17 '21 at 16:06

score 1 · Answer 1 · answered Feb 17 '21 at 15:51

I guess this code will help you.

 .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
.div1 { grid-area: 1 / 1 / 2 / 7; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 3 / 1 / 4 / 3; }

There are some CSS grid generators that can help you with structure, like this one: https://grid.layoutit.com/

Thanks, it's useful, but i am trying to understand elementor schema and use it — Vladimir Kyatipov, Feb 17 '21 at 16:05

css grid template column elementor make 2 / 1

1 Answers1