1.什么是grid布局?
grid布局是最强大的布局方案,它把网页分成了一个个可以任意组合的网格.
1.1grid布局与flex布局的区别?
flex是轴线布局,根据项目需求指定轴线方向.是'一维布局'
grid布局将容器分为行和列,产生单元格,然后指定'项目'所在单元格,可以看作是'二维布局'.grid布局远比flex布局强大
2.grid布局的基础概念
2.1容器与项目
采用网格布局的区域,我们称之为容器.
容器内部使用网格定位的元素,我们称之为项目.项目只能是容器的顶层元素.例如:
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
最外层的div是容器的话,那么里面的三个div就是项目,而所有的p标签都不是项目.
2.2行和列&单元格
容器的水平区域为行,垂直区域为列.
某行某列的交叉区域就是一个单元格.
通常n行m列的容器会产生n*m个单元格.
2.3网格线
划分单元格的线我们称之为网格线,通常n行会有n+1条网格线,m列也会有m+1条网格线.
3.容器属性
定义在容器上的属性我们称之为容器属性,定义在项目的属性我们称之为项目属性.
3.1 display属性
.container{
display:grid;
}
默认情况下,容器都是块级元素,当然也可以设置为行内块级元素.
div {
display: inline-grid;
}
3.2 grid-template-columns/rows属性
容器被指定了grid布局后,就该给容器指定行和列了.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
该代码指定了一个三行三列容器,且每一个容器的行高和列宽都是100像素.
这里除了写像素值以外也可以写百分比.
.container {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 33.3% 33.3% 33.3%;
}
repeat()
但如此重复写属性值很麻烦,就可以使用repeat()函数来repeat.那以上代码就可以改写为
.container {
display: grid;
grid-template-columns: repeat(3,33.3%);
grid-template-rows: repeat(3,33.3%);
}
那同学们应该看出来了,repeat()方法接受两个参数,第一个参数是重复次数,第二个参数是值.
grid-template-columns: repeat(2, 100px 20px 80px);
那这段代码会生成几列呢?
有时候单元格大小固定了,但容器的大小不固定,那就应该使用auto-fill属性自动填充.
auto-fill
.container {
display: grid;
grid-template-columns:repeat(auto-fill,100px);
}
自动生成n个列宽100px的单元格,生成到装不下为止.
fr
为了方便反应比例关系,grid提供了fr关键字(fraction//片段的缩写)来直观反应比例关系.
.container {
display: grid;
grid-template-columns:grid-template-columns: 1fr 1fr;
}
上面代码表示生成相同宽度的两列.(即一行元素被两个宽div分割)
