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等。
❓
Q&A
CSS Grid 布局的基本概念是什么？
CSS Grid 是一种二维布局方法，通过竖线和横线将内容划分成网格，子元素称为网格项。
如何将元素设置为网格容器？
使用 display: grid 或 display: inline-grid 将元素变成网格容器。
CSS Grid 中的 fr 单位有什么作用？
fr 表示网格容器的可用空间份额，用于定义网格列或行的比例。
如何使用 grid-template-areas 属性？
grid-template-areas 以网格区域名称表示网格的结构，简化网格项的放置。
什么是隐性网格轨道？
隐性网格轨道会根据需要自动添加，当显性网格轨道不足以容纳所有网格项时产生。
如何设置网格项的对齐方式？
可以使用 justify-self 和 align-self 属性来设置单个网格项的对齐方式。
🏷️
