在 CSS Grid 布局中，我们可以使用 justify-content 和 align-items 属性来控制单元格的水平和垂直对齐方式。这两个属性都是用来设置容器内子元素的对齐方式，但是它们的作用方向不同，justify-content 用来控制子元素在水平方向上的对齐方式，align-items 则用来控制子元素在垂直方向上的对齐方式。
justify-content
justify-content 属性用来控制子元素在容器内的水平对齐方式。它有以下几个可选值：
flex-start：子元素在容器的左侧对齐flex-end：子元素在容器的右侧对齐center：子元素居中对齐space-between：子元素平均分布在容器内，两端不留空白space-around：子元素平均分布在容器内，两端留有空白
示例代码：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------------------- --------- ----- ---------------- ------- - ----- - ----------------- ----- -------- ----- ----------- ------- -
在上面的示例中，我们使用了 grid-template-columns 属性来定义了一个包含三列的网格布局。然后我们使用 justify-content: center 将子元素居中对齐。最后，我们设置了子元素的背景颜色和内边距，使其更加美观。
align-items
align-items 属性用来控制子元素在容器内的垂直对齐方式。它有以下几个可选值：
flex-start：子元素在容器的顶部对齐flex-end：子元素在容器的底部对齐center：子元素居中对齐stretch：子元素高度将会被拉伸以填满容器baseline：子元素基线对齐
示例代码：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------------------- --------- ----- ------------ ------- - ----- - ----------------- ----- -------- ----- ----------- ------- -
在上面的示例中，我们同样使用了 grid-template-columns 属性来定义了一个包含三列的网格布局。然后我们使用 align-items: center 将子元素垂直居中对齐。最后，我们设置了子元素的背景颜色和内边距，使其更加美观。
总结
在 CSS Grid 布局中，我们可以使用 justify-content 和 align-items 属性来控制单元格的水平和垂直对齐方式。这两个属性可以帮助我们快速构建出各种不同的网格布局。需要注意的是，justify-content 用来控制子元素在水平方向上的对齐方式，align-items 则用来控制子元素在垂直方向上的对齐方式。当我们需要控制子元素在两个方向上的对齐方式时，可以同时使用这两个属性来达到我们想要的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66013f0ad10417a222c696da