Grid：用于组织子元素成行和列的布局面板。(grid用户)

Grid 布局是一种使用行和列来组织子元素的布局面板。它提供了创建复杂布局的灵活性和控制力。

网格用户

网格用户是创建网格布局的子元素。

• 
grid-row

  : 指定用户占据的行
• 
grid-row-span

  : 指定用户跨越的行数
• 
grid-column

  : 指定用户占据的列
• 
grid-column-span

  : 指定用户跨越的列数

示例

网格容器

网格容器是包含网格用户的元素。

• 
grid-template-columns

  : 定义网格的列
• 
grid-template-rows

  : 定义网格的行
• 
grid-gap

  : 定义网格中元素之间的间距

示例

网格区域

网格区域是网格中由行和列定义的区域。

• 
grid-area

  : 指定用户占据的区域

示例

总结

Grid 布局是一种功能强大的工具，可用于创建复杂的布局。通过使用行和列，您可以轻松控制子元素的位置和大小。