grid布局笔记3

04 Feb 2017

笔记介绍下grid-template-areas

grid-template-areas
grid-area

grid-template-areas

这个属性类似于给grid一个模版，它的语法是。

div{
    display:grid;
    grid-template-areas:'header header'
                        'body body'
                        'footer footer'
}

上面的代码意思就是生成一个2*3的布局

grid-area

注意到上面grid-template-areas中模版写了header1 foooter1 body1。而grid-area就是子元素来进行对应的布局

.item{
    grid-area:header1
}

这样可以于上面的名字相对应显示。写个具体的例子结束本文

<div class="grid">
    <div class='a'>a</div>
    <div class='b'>b</div>
    <div class='c'>c</div>
    <div class='d'>d</div>
    <div class='e'>e</div>
    <div class='f'>f</div>
</div>
<style>
    .grid{
    display:grid;
    grid-gap:10px;
    grid-template-areas:'header header header'
                        'body1 body2 body3'
                        'footer1 footer2 footer2'
}
.grid>div{
    color:#fff;
    text-align:center;
    padding:12px;
}
.a{
    background:#673ab7;
   grid-area:header;
}
.b{
    background:#3f51b5;
  grid-area:body1;
}
.c{
    background:#2196f3;
  grid-area:body2;
}
.d{
    background:#00bcd4;
  grid-area:body3;
}
.e{
    background:#4CAF50;
  grid-area:footer1;
}
.f{
    background:#8bc34a;
  grid-area:footer2;
}
</style>