css grid layout 初步认识

css grid layout 初步认识

近期在在回顾css的时候，重新学习了一下css的相关布局。
根据之前常用的布局包括

固定尺寸

布局可以从固定尺寸先了解，先构思好页面的主要结构，然后设定页面的整体大小，在页面的整体中划分小的模块进行尺寸的固定，直到整个页面布局完成。

自适应尺寸

响应式的布局的结构其实就是多个固定尺寸的组合，元素的宽度，字体的大小一般会以百分比的形式设置，通过媒体查询进行不同分辨率下的布局，

弹性盒子flex布局

弹性盒子，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。具体访问
https://www.runoob.com/w3cnote/flex-grammar.html
https://blog.csdn.net/naruto_luoluo/article/details/51279761

虽然css grid layout 在之前自己只是听说，然而自己没有实际用过，因为之前浏览器的支持程度比较低，所以就没有去学习了解，在最近重新回顾css的时候自己在https://caniuse.com/中发现，css grid layout的支持程度已经很高了，于是自己就重新认识了一下。

IMG20180829_103613.png

什么是网格布局？

在web内容中，可以将内容分隔成多个内容块，每个内容块占据自己的空间，因此形成了一个网状的格局，类似我们在用table的时候，将其分为多个行列的单元格，形成了一个二维布局空间。

waht is css grid layout ?

css grid layout 是一个web内容的二维布局系统，它可以将你的内容按行和列进行划分，并且直接明确的指定了划分的某个内容块所处的位置空间。它所包含的基础属性名称有

grid(设定网格) , grid-template-columns(网格列) , grid-template-rows(网格行) ，grid-gap(网格间隙)

对css grid layout进行练习和认识

一,按网格线划分布局

    

      
A
      
B
      
C
      
D
      
E
      
F
    
    

在上面布局中，我们设定 .wrapper{grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;} 这样就将其分为7列，会有8条列网格线，设定 .wrapper{grid-template-rows: auto 10px auto 10px auto;}将其分为5行，因此形成6条行网格线。
然后设定.a{grid-column: 1 / 6; grid-row: 1 / 2;},让A块占据列网格线1-6，行网格线1-2之间的部分；同样设定.b{grid-column: 7 / 8; grid-row: 1 / 6;}让B块占据列网格线7-8，行网格线1-6，其他模块按同样的方法。

注意也可以指定已被其他块占据的网格线部分，例如效果图D块，.d{grid-column: 2 / 6; grid-row: 3 / 4;} ,这样就会出现按顺序覆盖的现象因为E块元素节点在D的后面，所以E块遮挡了D块列5-6网格线之间的部分，也可以根据自己的需求来设置z-index调整层级关系

效果图

IMG20180829_113317.png

二，按fr进行划分
下班是自己利用css grid和flex进行的一个列表布局，在这个部分中，表头固定，列表部分如果超出设定高度进行滚动

        

            
A
            
B
            
C
        
        

            

                
1
                
2
                
3
            
            

                
1
                
2
                
3
            
            

                
1
                
2
                
3
            
        
    
    

如上设置.frbox{grid-template-columns: 1fr 2fr 1fr;},将其按列分为4栏，其中中间块B占据2栏，
同样设定 li{ grid-template-columns: 1fr 2fr 1fr;}按和表头相同的栏数划分，这样便形成了一个简单的列表布局。

效果图

1234.gif

其中fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

有关fr资料可查找

http://www.css88.com/book/css/values/layout-specific/fr.htm

如上是自己个人对css grid layout的初步了解，希望以后再应用中有更多的认识。

相关参考资料

https://segmentfault.com/a/1190000002437544
https://segmentfault.com/a/1190000002448197
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids