栅格布局

一、开启栅格布局（display:grid）–父容器

栅格布局能将网页分成简单的行和列；Grid（网格）模块为 display 属性提供了一个新的值：grid。



当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个网格容器（grid container），他的所有直接子元素就成了网格项（grid items）；如下：.box 容器下 .box>div 就称之为网格项

1. <div class="box">
   
2.     <div>1</div>
   
3.     <div>2</div>
   
4.     <div>3</div>
   
5.     <div>4</div>
   
6.     <div>5</div>
   
7.     <div>6</div>
   
8.     <div>7</div>
   
9.     <div>8</div>
   
10.     <div>9</div>
    
11. </div>
    

复制代码

二、配置行和列（grid-template-rows/grid-template-columns）–父容器

1. .box{
   
2.     display: grid;
   
3.     /* 属性值的个数就是行/列数，具体数值即为对应行高/列宽 */
   
4.     grid-template-rows: 200px 200px 200px;   
   
5.     grid-template-columns: 200px 200px 200px;
   
6. }
   

复制代码

fr: 网格布局定义的一个新单位，可以帮助我们摆脱计算百分比，并将可用空间按比例分配；（需要确定容器的宽度，等分是按照父元素的宽高去计算）

1. .box{
   
2.     display: grid;
   
3.     width:600px;
   
4.     height:600px;
   
5.     /* 属性值的个数就是行/列数，具体数值即为对应行高/列宽所占的份数 */
   
6.     grid-template-rows: 1fr 1fr 1fr;
   
7.     grid-template-columns: 1fr 1fr 1fr;
   
8. }
   

复制代码

等分可以有更加简洁的写法，官方提供了 repeat () 函数

1. .box{
   
2.     display: grid;
   
3.     /* 第一个参数是迭代次数，第二个参数是要重复的值。 */
   
4.     grid-template-rows: repeat(3, 1fr);
   
5.     grid-template-columns: repeat(3, 1fr);
   
6. }
   

复制代码

手动给元素子元素添加颜色

1. .box>div:nth-child(1) {
   
2.    background-color: blue;
   
3. }
   
4. .box>div:nth-child(2) {
   
5.   background-color: green;
   
6. }
   
7. .box>div:nth-child(3) {
   
8.   background-color: pink;
   
9. }
   
10. .box>div:nth-child(5) {
    
11.   background-color: blueviolet;
    
12. }
    
13. .box>div:nth-child(7) {
    
14.   background-color: palevioletred;
    
15. }
    
16. .box>div:nth-child(9) {
    
17.   background-color: yellowgreen;
    
18. }、

复制代码