Why we use CSS Grid template ? When we have a various CSS Properties and CSS Flex

Tell us what’s happening:
Especially this," Divide the Grid Into an Area Template". I don’t understand why I am using this and what it helps in creating a better design in CSS.

Your code so far
CSS Grid: Divide the Grid Into an Area Template


<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}

.container {
  font-size: 40px;
  min-height: 300px;
  width: 100%;
  background: LightGray;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  
  /* Only change code below this line */
    grid-template-areas:
    "header header header"
    ". content content"
    "footer footer footer";
  /* Only change code above this line */
}
</style>

<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Divide the Grid Into an Area Template

Link to the challenge:

at this time this is not doing anything, in the next challenge you would assign the elements to the areas

Flexbox lets you organize items either horizontally or vertically, so only in one direction at a time. Grid lets you organize the layout both along the horizontal and vertical axis at the same time, giving you a bit more control.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.