Grid 布局是一种用于网页布局的 CSS 技术，它允许开发者定义一个元素内部的行和列，并在这些网格中放置子元素，是一个强大的布局方式。
容器属性
Grid 布局需要在父容器上设置 display 属性为 grid 或 inline-grid，以表明它们包含网格项。
行列定义
使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。例如，grid-template-columns: 100px 1fr 2fr;表示有 3 列，第一列宽度为 100 像素，第二列占据可用空间的 1/3，第三列占据可用空间的 2/3。
网格间距
可以使用 grid-column-gap 和 grid-row-gap 属性定义网格项之间的间距。
网格定位
使用 grid-column 和 grid-row 属性将网格项放置到特定的单元格中。例如，grid-column: 1 / 3;表示该项横跨第一列和第二列。
网格跨度
使用 grid-column-span 和 grid-row-span 属性，使网格项横跨多个列或多个行。
网格对齐
可以使用 justify-items、align-items、justify-content 和 align-content 属性对网格项进行水平和垂直方向上的对齐。
子元素的自动流动
如果没有指定网格位置，则子元素将按照其在文档中出现的顺序自动流动到网格中。