css grid布局

0 阅读1分钟

必须理解的概念

  • 容器和项目:
  • 行和列:
  • 单元格:
  • 网格线: 划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。
  • fr: grid布局新增的专属布局单位

image.png

重要属性

  • grid-template-columns: 定义列宽
  • grid-row-gap: 行间距
  • grid-column-gap: 列间距
  • grid-column-start: 单元格左边框所在的垂直网格线。注意上面的网格线定义
  • grid-column-end: 单元格右边框所在的垂直网格线。注意上面的网格线定义

参考文章

从混乱到有序:CSS grid-template-columns 打造精准网格布局

CSS Grid 网格布局教程

CSS content-visibility:提升页面渲染性能的 “智能渲染开关”