grid 网格布局
CSS 网格是一个用于 web 的二维布局系统。利用网格,你可以把内容按照行与列的格式进行排版。另外,网格还能非常轻松地实现一些复杂的布局
grid 容器
grid 容器有很多项
定义网格及 fr 单位
grid-template-rows
和grid-template-columns
用来基于网格行和列的维度,去定义网格线的名称和网格轨道的尺寸大小- 单位 fr 是按剩余空间的比例计算,比如总的宽度 300px,设置
grid-template-columns: 150px 1fr 1fr
宽度分别:150px 75px 75px
合并网格及网名命名
grid-template-areas
使用命名方式定义网格区域,需配合grid-area
属性进行使用
grid-template
是grid-template-rows
,grid-template-columns
和grid-template-areas
的 缩写
网格间隙及简写
grid-row-gap
,grid-column-gap
和grid-gap
用来设置元素行列之间的间隙大小,推荐使用row-gap
,column-gap
,gap
,grid-
前缀已废弃gap
是row-gap
和column-gap
的缩写,比如 flex 布局也支持gap
属性
网格对齐方式及简写
justify-items
和align-items
默认值 stretch,指定了子项在网格中的对齐方式place-items
是justify-items
和align-items
的简写justify-content
和align-content
默认值 stretch,指定了所有网格在 grid 容器中的对齐方式place-content
是justify-content
和align-content
的简写
显式网格与隐式网格
指定在显示网格之外的隐式网格,如何排列及尺寸大小
grid-auto-flow
row 默认值,行产生隐式网格,column 列产生隐式网格,可以加一个dense
的选项grid-auto-rows
可以调节产生隐式网格的高度grid-auto-columns
可以调节产生隐式网格的宽度
grid 子项
分别解析
基于线的元素放置
表示 grid 子项所占据的区域的起始和终止位置,包含水平方向和垂直方向,默认值都是 auto
grid-column-start
列的开始位置grid-column-end
列的终止位置grid-row-start
行的开始位置grid-row-end
行的终止位置- grid-area 是以上四个的缩写(注意顺序是: start/start/end/end),以及额外支持
grid-template-areas
设置的网格名称
基于线对齐位置的缩写方式,通过 /
作为分割
grid-column
缩写格式:[开始]/[结束]
grid-row
缩写格式:[开始]/[结束]
子项对齐方式
justify-self
自身行对齐align-self
自身列对齐place-self
以上两个缩写
方法 repeat() 与 minmax()
- repeat() 方法以及 auto-fill 可选值,指定可重复的数字
- minmax() 方法,设置最小和最大值的范围
实例
基础实例
比定位更方便的叠加布局
- 使用 grid 实现定位的效果
多种组合排列布局
- 使用 grid 实现排列布局
栅格布局
- 使用 grid 实现栅格布局
容器自适应行列布局
- 使用 grid 实现行列自适应
综合案例
实现比较复杂的布局
百度热词风云榜
只实现效果
小米商品导航菜单
只实现效果