How to achieve stacking in CSS grid layout-CodePudding

I would like some help from the CSS Gurus please. I need to make a Grid Layout whereby there are 3 divs within the grid. the first div takes up 2 thirds of the width and is twice the height of the other 2. The other 2 divs need to take up 1 third each and should therefore stack on top of each other in the remaining third.

Please assist?

CodePudding user response：

So the snippet should work for you.

body { margin: 0 } body > * { height: 100vh }

.grid {
  display: grid;
  grid-template-areas:
  "lg lg sm1"
  "lg lg sm2"
}

.grid > div { border: 1px solid grey }

.lg { grid-area: lg }
.sm1 { grid-area: sm1 }
.sm2 { grid-area: sm2 }

<div >
  <div >Large</div>
  <div >Small 1</div>
  <div >Small 2</div>
</div>

Otherwise hop onto a grid layout builder and see how you get on. I've set up an example for you https://grid.layoutit.com/?id=TtnKCtI

CodePudding user response：

As they mentioned before, there are Grid generator tools where you can visualize a preview of your grid and then just copy the code to your CSS file. I'm sharing with you here the one that I use:

https://grid.layoutit.com/

Hope it was helpful.