Skip to content

grid 网格布局

CSS 网格是一个用于 web 的二维布局系统。利用网格,你可以把内容按照行与列的格式进行排版。另外,网格还能非常轻松地实现一些复杂的布局

grid 容器

grid 容器有很多项

定义网格及 fr 单位

grid

  • grid-template-rowsgrid-template-columns 用来基于网格行和列的维度,去定义网格线的名称和网格轨道的尺寸大小
  • 单位 fr 是按剩余空间的比例计算,比如总的宽度 300px,设置 grid-template-columns: 150px 1fr 1fr 宽度分别:150px 75px 75px

合并网格及网名命名

  • grid-template-areas 使用命名方式定义网格区域,需配合 grid-area 属性进行使用
  • grid-templategrid-template-rowsgrid-template-columnsgrid-template-areas 的 缩写

网格间隙及简写

  • grid-row-gapgrid-column-gapgrid-gap 用来设置元素行列之间的间隙大小,推荐使用 row-gap,column-gap,gapgrid- 前缀已废弃
  • gaprow-gapcolumn-gap 的缩写,比如 flex 布局也支持 gap 属性

网格对齐方式及简写

  • justify-itemsalign-items 默认值 stretch,指定了子项在网格中的对齐方式
  • place-itemsjustify-itemsalign-items 的简写
  • justify-contentalign-content 默认值 stretch,指定了所有网格在 grid 容器中的对齐方式
  • place-contentjustify-contentalign-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 实现行列自适应

综合案例

实现比较复杂的布局

百度热词风云榜

只实现效果

小米商品导航菜单

只实现效果

基于 MIT 许可发布