Search code examples
cssgrid-layout

How to achieve stacking in CSS grid layout

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?

Solution

  • 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 class="grid">
  <div class="lg">Large</div>
  <div class="sm1">Small 1</div>
  <div class="sm2">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