随着网格布局的普及率越来越高,在前端面试中出现的概率也逐年增长,这里只做个引子,这方面的内容还是需要重视起来的,不只是面试中,在日常项目中页可以提高自己的排版布局效率。
什么是网格布局
网格布局(Grid)应该是目前最强大的 CSS 布局方案。
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。
Grid
布局即网格布局,是一个二维的布局方式,与 Flex
不同的是 Flex 是一维布局,而 Grid 由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列,擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。
Grid布局是将容器划分成“行”和“列”,产生单元格,然后指定“项目所在”的单元格。适合固定不需要动态改变的布局方式。
设置display:grid/inline-grid
的元素就是网格布局容器,这样就能出发浏览器渲染引擎的网格布局算法
网格布局的属性
属性的基本概念:
- 容器(container)——有容器属性
- 项目(items)——有项目属性
- 行(row)
- 列(column)
- 间距(gap) ——单元格之间的距离
- 区域(area)—— 自己划分每个单元格占据的区域
- 内容(content)
容器属性:
- grid-template-columns:设置每一列的宽度,可以是具体值,也可以是百分比
grid-template-rows:设置每一行的宽度,可以是具体值,也可以是百分比
常见的设置的值
repeat():第一个参数是重复的次数,第二个参数是所要重复的值
auto-fill:有时单元格的大小是固定的,但是容器的大小不确定,这个属性就会自动填充
fr:为了方便表示比例关系,网格布局提供了fr关键字(fraction的缩写,意为片段)
minmax():函数产生一个长度范围,表示长度就在这个范围之中,它接受两个参数,分别为最小值和最大值
auto:表示由浏览器自己决定长度
.content{
width: 300px;
height: 300px;
margin: auto;
display: grid;
/* 中间的宽度由浏览器自己决定 */
grid-template-columns: 100px auto 100px;
}
复制代码
-
grid-column-gap
grid-row-gap
grid-gap(前两个的缩写)
表示项目相互之间的距离,新版本grid-前缀已经删除。 -
grid-template-areas
一个区域由单个或多个单元格组成,由自己决定(具体使用,需要在项目属性中设置)
区域不需要利用时,则使用“.”表示
区域的命名会影响到网络线,会自动命名为区域名-start,终止网格线自动命名为-end
4.grid-auto-flow:划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是“先行后列”,即先填满第一行,再开始放入第二行(就是子元素的排放顺序)
grid-auto-flow:row;(先行后列)
5.justify-items(水平方向)/ align-items(垂直方向)
设置单元格内容的水平和垂直对齐方式。
水平方向上:
justify-items:start|end|center|stretch;
justify-items:start; 起始方向对齐
- justify-content(水平方向)/ align-content(垂直方向)
设置整个内容区域的水平和垂直的对齐方式 可以采用place-item:center
详细的属性可以参考 阮一峰 CSS Grid 网格布局教程
网格布局的使用
display 属性 文章开头讲到,在元素上设置display:grid 或 display:inline-grid 来创建一个网格容器
display:grid 则该容器是一个块级元素
display: inline-grid 则容器元素为行内元素
grid-template-columns 属性,grid-template-rows 属性 grid-template-columns 属性设置列宽,grid-template-rows 属性设置行高
面试相关的问题
-
元素水平垂直居中
-
说下
Flex
与Grid
的区别 -
如何实现两列或三列布局