CSS布局之Grid布局原理详细分析 —— 一篇搞定Grid布局

  初学html+css布局的时候，可能大家都是和我一样，用的最多的就是flex,而用的最多的那几个属性就是justify-content; align-items；其实flex真的很好用，可是偶然的机会，发现了一个Grid，可以整体排版布局，甚至像bootstrap里面的row和col-排班，而且完全没有依赖任何框架，在使用时也无需像flex那样加各种兼容浏览器的前续，下面例子方便解释说明它的属性和使用方法。

//html部分  <div class="container">     
<div class="item">A</div>     
<div class="item">B</div>     
<div class="item">C</div>     
<div class="item">D</div>     
<div class="item">E</div> </div>

display: grid;

//css .container{     display: grid; }

下面提到父容器一律用“container”，提到子元素元素一律用称“item”。

当在container中添加display: grid;时，显示为一列，并且沾满一行。其实是相当于

 display: inline-grid;

这个属性值其实和inline-block是一样的意思。

.container{     display: inline-grid; }

下面我们在开始创建网格。

通过使用grid-template-columns和grid-template-rows属性创建列和行来显式设置网格。

.container{     
display: grid;     
grid-template-rows: 20px 80px;//高度 
}

5个元素，5行，如果只设置2个值的话，指挥按照是从先后顺序得到图中的效果：

在这个过程中我发现，如果是grid-auto-rows的话，会如下的效果

.container{     
display: grid;     
grid-auto-rows: 20px 80px; 
}

每两行就是一个这样的尺寸，循环，如果内容超出默认也不会改变它的高度。

不难想到，如果grid-auto-rows:只设置一个值的话，那将会是什么样的？

.container{     
display: grid;     
grid-auto-rows:50px; 
}

下面来学习另外一种按比例设置宽高的方式；

在以前我们都是这样来平均分配我们的宽度，可是要是分平均分成3份就很难做到。