从零学CSS | Grid 布局 2：深度探索属性，掌控网格布局的奥妙

Grid 布局的属性

Grid 布局的属性可以分为两类：容器属性和项目属性。容器属性用于定义网格容器的排布，项目属性用于定义网格项目在网格中的排列方式。

容器属性

容器属性包括：

• justify-content：声明水平位置
• align-items：声明垂直位置

justify-content

justify-content 属性用于定义网格容器中网格项的水平排列方式。它可以取以下值：

• start：将网格项排列在容器的左边缘
• center：将网格项排列在容器的中间
• end：将网格项排列在容器的右边缘
• space-around：将网格项均匀地分布在容器中，并在容器的两端留出空白
• space-between：将网格项均匀地分布在容器中，并在网格项之间留出空白

align-items

align-items 属性用于定义网格容器中网格项的垂直排列方式。它可以取以下值：

• start：将网格项排列在容器的顶部
• center：将网格项排列在容器的中间
• end：将网格项排列在容器的底部
• stretch：将网格项拉伸到容器的高度
• baseline：将网格项排列在容器的基线上

项目属性

项目属性包括：

• justify-self：定义网格项在网格容器中的水平排列方式
• align-self：定义网格项在网格容器中的垂直排列方式

justify-self

justify-self 属性用于定义网格项在网格容器中的水平排列方式。它可以取与 justify-content 属性相同的值。

align-self

align-self 属性用于定义网格项在网格容器中的垂直排列方式。它可以取与 align-items 属性相同的值。

使用属性控制网格布局

你可以使用这些属性来控制网格布局的外观和感觉。例如，你可以使用 justify-content 属性来将网格项排列在容器的中间，使用 align-items 属性来将网格项排列在容器的底部。

你还可以使用这些属性来创建更复杂的布局。例如，你可以使用 justify-self 属性来将某些网格项排列在容器的左侧，而将其他网格项排列在容器的右侧。你还可以使用 align-self 属性来将某些网格项排列在容器的顶部，而将其他网格项排列在容器的底部。

结论

Grid 布局的属性可以让你掌控网格布局的排布，包括容器的水平和垂直位置，项目的排列方式以及如何调整项目的位置。本文已经探讨了这些属性，并提供了如何使用它们来创建更复杂的布局的示例。