CSS Grid 布局是现代网页布局的重要组成部分，它可以帮助我们更有效地分配页面中的空间和位置。在使用 CSS Grid 布局时，我们可以使用 justify-content 和 align-content 属性来控制网格项目在网格容器中的对齐方式和分布。
justify-content 属性
justify-content 属性用于水平对齐网格项目。它可以将网格项目向左或向右对齐，也可以将网格项目均匀分布在容器中。
属性值
justify-content 属性支持以下属性值：
flex-start：将网格项目向容器的左侧对齐。flex-end：将网格项目向容器的右侧对齐。center：将网格项目居中对齐。space-between：将网格项目均匀地分布在容器内。项目之间的距离相等。space-around：将网格项目均匀地分布在容器内，并在项目两侧留出相等的间距。
示例代码
下面是一个使用 justify-content 属性的示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------ ------- ---------- - -------- ----- ---------------------- --- --- ---- -- ---- -- ---------------- ------- -- --------- -- - ----- - ----------------- -------- -------- ----- ----------- ------- - --------
align-content 属性
align-content 属性用于垂直对齐网格项目。它可以将网格项目向上或向下对齐，也可以将网格项目均匀分布在容器中。
属性值
align-content 属性支持以下属性值：
flex-start：将网格项目向容器的顶部对齐。flex-end：将网格项目向容器的底部对齐。center：将网格项目居中对齐。space-between：将网格项目均匀地分布在容器内。项目之间的距离相等。space-around：将网格项目均匀地分布在容器内，并在项目两侧留出相等的间距。stretch：将网格项目拉伸以填充容器。
示例代码
下面是一个使用 align-content 属性的示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------ ------- ---------- - -------- ----- ---------------------- --- --- ---- -- ---- -- ------------------- ----- ------ -- ---------- ----- -- -------------- ------- -- --------- -- - ----- - ----------------- -------- -------- ----- ----------- ------- - --------
结论
通过使用 justify-content 和 align-content 属性，我们可以更好地控制网格项目在网格容器中的位置和分配。无论您需要垂直还是水平对齐网格项目，这些属性都能够帮助您轻松实现您的布局目标。在实践中尝试这些属性，并寻找它们与其他 CSS Grid 属性之间的相互作用，以获得更多的灵活性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670cef395f551281025c0bbf