初学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>
//css .container{ display: grid; }
下面提到父容器一律用“container”,提到子元素元素一律用称“item”。
当在container中添加display: grid;时,显示为一列,并且沾满一行。其实是相当于
.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;
}