标签：flex span column 布局 学习 start grid row

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

 

与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-start: 3;

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

　  跨越：    grid-column:  2 / span 2;  =>   grid-column-start: 2;  grid-column-start: 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;

 

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

  

标签：flex,span,column,布局,学习,start,grid,row
来源： https://www.cnblogs.com/shirunfeng/p/16536137.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。