How to without changing the DOM order, achieve this layout https://ibb.co/Y8TQLcC? I'm stuck with grid template areas for more than an hour.

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
display: grid;
grid-template-areas: 
  "one three";
   "two"
}

.one {
  grid-area: one;
  border: 1px solid;
}

.three {
grid-area: three;
  border: 1px solid;
}

.two {
grid-area: two;
  border: 1px solid;
}

<div class="parent">
    <div class="one">one</div>
    <div class="three">three</div>
    <div class="two">two</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Your grid-template-areas are defined incorrectly. Think of it as drawing a rough table / grid while telling css which cells of rows and columns act in which way on output.

Changing the grid-template-areas to following will work:

grid-template-areas: 
  "one one three"
  "one one three"
  "two two three";
}

The full code becomes this:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
display: grid;
grid-template-areas: 
  "one one three"
  "one one three"
  "two two three";
grid-template-rows: auto; height: 100vh;
}

.one {
  grid-area: one;
  border: 1px solid;
}

.three {
grid-area: three;
  border: 1px solid;
}

.two {
grid-area: two;
  border: 1px solid;
}

<div class="parent">
    <div class="one">one</div>
    <div class="three">three</div>
    <div class="two">two</div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Fixed the grid container's grid-template-areas to get the desired grid layout based on 3 x 3 tiles & gave it viewport's screen height:

.parent {
  display: grid;
  height: 100vh;
  grid-template-areas: 
  "one one three"
  "one one three"
  "two two three";
}