CSS Grid 布局教程
💡
原文中文，约12700字，阅读约需31分钟。
📝
内容提要
CSS Grid是一种二维布局方法，通过display: grid | inline-grid将元素变成网格容器，子元素称为网格项。可以使用竖线和横线划分网格，网格布局的最小单位是网格单元。可以使用grid-template-columns和grid-template-rows设置网格的列和行。其他属性包括justify-items、align-items、place-items、justify-content、align-content、place-content等。
🎯
关键要点
- CSS Grid 是一种二维布局方法，通过竖线和横线将内容划分成格子。
- 使用 display: grid | inline-grid 将元素变成网格容器，子元素称为网格项。
- 网格布局的最小单位是网格单元，可以使用 grid-template-columns 和 grid-template-rows 设置列和行。
- 显性网格有固定数量的网格轨道，隐性网格轨道会根据需要自动添加。
- fr 表示网格容器的可用空间份额。
- minmax() 函数设置网格单元的最小值和最大值。
- repeat() 函数用于表示重复的网格轨道片段。
- 网格容器可以使用多种属性，如 justify-items、align-items、place-items 等。
- grid-template-areas 以网格区域名称表示网格的结构，简化网格项的放置。
- grid-auto-flow 设置网格项的放置算法，支持 row、column 和 dense。
- grid 是 grid-template-rows、grid-template-columns、grid-template-areas 等的缩写。
- 网格项可以使用 grid-column-start、grid-row-start 等属性来定义位置。
- justify-self 和 align-self 用于设置单个网格项的对齐方式。
- subgrid 允许网格项继承其父容器的网格属性。
- order 属性用于设置网格项的出现顺序，默认值为 0。
➡️
