grid布局学习

虽然不经常用还是抽个空学一下  卷！

 

与flex不同之处   grid为二维布局

 

1. 布局:  display: grid;

 

2. 网格间距: grid-gap: 10px;   行列通用间距   // 写法类似 padding margin

　　　　  grid-row-gap: 10px;  行间距；

　　　　  grid-column-gap: 10px; 列间距；　　

 

3. 网格线

　　

　　使用  grid-row-start / gird-column-start  决定起始线

　　使用  grid-row-end /  grid-column-end   决定结束线

 

4. 行数/列数

　　grid-template-columns: auto auto auto;     有几个数值就有几列    全是auto时类似 flex: 1;

　　grid-template-rows:  80px 100px;　　　　具体数值可以决定 宽度 / 高度

 

5. 水平对齐方式  justify-content: center            基本和flex相同  多了个  space-evenly  会在列之间以及列周围留出相等的空间

 

6. 垂直对齐方式 align-items: center                 基本和flex相同  多了个  space-evenly  会在行之间以及行周围留出相等的空间   属性值与 justify-content 相同

 

7.  grid-column   网格线的缩写模式    grid-column: 2 / 3   =>   grid-column-start: 2; grid-column-end: 3;

　  grid-row        网格线的缩写模式    grid-row: 2 / 3   =>   grid-row-start: 2; grid-row-end: 3;

　  跨越：    grid-column:  2 / span 2;  =>   grid-column-start: 2;  grid-column-end: 4;    即  从column 2 开始, 跨越两列

 

8. grid-area        将 grid-column  grid-row  合并的写法

　grid-area:  1 / 2 / 5 / 6;   =>  grid-row: 1 / 5;  grid-column: 2 /  6;

　跨越:    grid-area: 1 / 2 / span 2 / span 3;   =>  grid-row: 1 / span 2;  grid-column: 2 /  span 3;

　新理解： 可以通过为元素添加grid-area: one; grid-area: two; 这种去为元素增加grid区域名 添加该名字后 元素就不会自动填充在表格内 

　　　　　 需要配合 grid-template-areas: ""；  来为元素添加具体的布局方式

.grid-box {
  grid-templates-columns: repeat(2, 1fr);  
  grid-templates-rows: repeat(2, 1fr);  
  grid-template-areas: "one one"
                       "two two";    
}

 

9.网格命名项   稍后再学...