一.基本概念
1.1.采用网格布局的区域就是容器,容器内部采用网格定位的子元素就称为项目。(注意必须是容器的直接子元素才能是项目,Grid布局只对项目有作用)。
<div class="container">
<div class="item"><p>1</p></div>
<div class="item"><p>2</p></div>
<div class="item"><p>3</p></div>
</div>
//class为item的div才是项目,p元素不是项目,因为他不是为外层class为container的div的直接子元素。所以Grid布局对其无效。
1.2.容器的水平区域称为行(row),垂直区域称为列(column)。行和列的交叉区域就成为了单元格。正常情况下n行会有n+1条水平线,m列就会有m+1条垂直线。
二,容器属性。
2.1容器可以是块级元素,也可以使行内元素,一般默认情况下是块级元素。可以使用display-inline-grid属性将其设置称为行内元素。(注意只要设置了Grid布局以后,容器的float,display:inline-block,display:table-cell,vertical-align等设置都将失效)
2.2.设置了容器之后,就需要给容器分行和列了。grid-template-columns属性定义可列的宽度,grid-template-rows定义了行的高度。
将容器分割成了一个3*3的网格,每个行的高度为100px,列的宽度为100px。除了固定固定宽高之外还可以写成半分比的形式。上面可改写为下面带代码。(注意这里项目大小被写死了,就是宽高100px。)
grid-tempalte-columns:33.3% 33.3% 33.3%;
grid-template-rows: 33.3% 33.3% 33.%;
//这会将容器分割为一个3*3的网格,且每个单元格一样大小,自动填满容器,均分容器空间。这里宽高随容器大小改变。
有时候当网格比较多的时候,且大小相同的时候,这么写会很麻烦,所有为了简便,有一个重复函数可以用。
2.3.repeat()
这个函数接受两个参数,第一个参数为重复的次数,第二个参数为重复的值,例如