grid布局

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分割)