网格简单入门1

Posted 2020-11-01 后小白

1.定义网格 

display: grid;
        grid-template-rows: 200px 200px 200px; 行或 1fr 1fr 1fr fr是等分的意思
        grid-template-columns: 200px 200px 200px; 列
　　　　　简写grid-template：行/列　　如grid-template：200px 200px 200px/200px 200px 200px；

2.移动网格：利用伪类:nth-child(n)

　　  grid-area: 1/2/2/3 表示区域，前两个是行，后两个是列，表示交换前水平第二个格

　　在css里添加了

　　.box:nth-child(6) {
　　grid-area: 1/2/2/3;
　　}

1

2

3

4

5

6

7

8

9