CSS3之新特性:grid栅格布局的使用方法(真正的row和column都自己控制)
CSS3之grid栅格布局(行列同时控制)的布局效果:
<div class="container">
<div class="first">第一区域</div>
<div>第二区域</div>
<div class="three">第三区域</div>
<div class="four">第四区域</div>
<div >第五区域</div>
<div >第六区域</div>
<div>第七区域</div>
</div>
// grid-template是控制父元素的属性(多少行,多少列)
// grid-row 和 grid-column 是控制项目(子元素)的跨度
// 比如:三行(1、2、3、4)那么一共有4个位置【grid-row:1 / 3 就是把行的第一格和第二格全部占了】
// 比如有四列(1、2、3、4、5)那么一共有5个位置【grid-column:2 / 5 就是把列的第二格和第四格全部占了】
.container {
height: 800px;
border: 1px solid black;
display: grid;
grid-template-rows: 20% 60% 20%;
grid-template-columns: 20% 60% 20%;
.first, .three{
background: gray;
}
.four {
background: darkgreen;
grid-column: 1 / 4;
}
}