0

Not sure why container's 'grid-template-areas' property and grid-item's 'grid area' property are not working! https://codepen.io/rfrostr/pen/XWmzewp

<div class="grid-container">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);

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

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}
rfrostr
  • 91
  • 7

1 Answers1

2

Ah, the problem is you are asking grid to do something it cannot do. You are defining 3 DOM elements, and then trying to position them in a way which would split them into 6 separate sections which cannot be done. Think of grid as a grid, where an element must be a square of a rectangle, and you should be off to the races!

If you want this exact format to work, I would make 3 new elements and give them different names so they can be positioned as you wish. A better solution for this would be to use component architecture in some fashion (angular and whatnot).

Happy coding!

iamaword
  • 1,327
  • 8
  • 17
  • 1
    Forgot to say - thank-you for this response! Got shown another thread which asked that problem and I think it's safe to say I got the rule. My way of paraphrasing the rule was: 'An element can’t occur more than once unless it’s (horizontally) adjacent to a duplicate of itself'. – rfrostr May 11 '20 at 15:27