CSS Grid 布局是前端开发中非常强大的一种布局方式，可以实现复杂的网格布局。在 CSS Grid 布局中，我们可以使用 justify-items 和 align-items 属性来设置单元格的水平和垂直对齐方式。
justify-items 属性
justify-items 属性用于设置单元格内容的水平对齐方式。可以设置的值包括：
- start：内容靠左对齐
- end：内容靠右对齐
- center：内容居中对齐
- stretch：内容拉伸填满单元格
示例代码：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- -------------- ------- - ----- --- - ----------------- ----- ------- ------ ------ ------ -
在上面的示例代码中，我们创建了一个 3 列的网格布局，并将单元格内容设置为居中对齐。这样，每个单元格的内容都会居中显示。
align-items 属性
align-items 属性用于设置单元格内容的垂直对齐方式。可以设置的值包括：
- start：内容靠上对齐
- end：内容靠下对齐
- center：内容居中对齐
- stretch：内容拉伸填满单元格
示例代码：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- ------------ ------- - ----- --- - ----------------- ----- ------- ------ ------ ------ -
在上面的示例代码中，我们创建了一个 3 列的网格布局，并将单元格内容设置为居中对齐。这样，每个单元格的内容都会垂直居中显示。
justify-items 和 align-items 的组合使用
在实际开发中，我们通常需要同时设置单元格内容的水平和垂直对齐方式。这时，我们可以使用 justify-items 和 align-items 属性的组合使用。
示例代码：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- -------------- ------- ------------ ------- - ----- --- - ----------------- ----- ------- ------ ------ ------ -
在上面的示例代码中，我们创建了一个 3 列的网格布局，并将单元格内容设置为居中对齐。这样，每个单元格的内容都会水平和垂直居中显示。
总结
CSS Grid 布局中的 justify-items 和 align-items 属性可以帮助我们轻松设置单元格内容的水平和垂直对齐方式。在实际开发中，我们可以根据需要组合使用这两个属性，实现更加灵活的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fe35d5d10417a222979656