grid-template-areas

使用 grid-template-areas 定義每個區塊，grid-item再使用grid-area決定元素的位置。

<div class="wrapper">
   <div class="purple">purple</div>
   <div class="green" >green</div>
   <div class="yellow">yellow</div>
   <div class="red">red</div>
</div>

.wrapper {
  display: grid;
  grid-template-areas : 
    "purple purple green green green"
    "purple purple yellow yellow yellow"
    "red red red red red";
}
.purple
{
  border:1px solid black;
  grid-area:purple;
  background-color: purple;
}
.green
{
  border:1px solid black;
  grid-area:green;
  background-color: green;
}
.yellow
{
  border:1px solid black;
  grid-area:yellow;
  background-color: yellow;
}
.red
{
  border:1px solid black;
  grid-area:red;
  background-color: red;
}

使該區域無效可以用「.」

grid-template-areas : 
    "purple purple green green ."
    "purple purple yellow yellow yellow"
    "red red red red red";

可以在搭配上昨天講的grid-template-columns/rows 控制寬高。

.wrapper {
  display: grid;
  grid-template-columns : 50px 60px 100px 100px 100px;
  grid-template-rows : 30px 60px 90px;
  grid-template-areas : 
    "purple purple green green ."
    "purple purple yellow yellow yellow"
    "red red red red red";
}