前言
在 CSS Grid 布局中，我们可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格列和行。同时我们也可以使用 grid-template-areas 来定义网格的布局。然而，这些属性和方法仅仅是定义了网格结构，但我们需要进一步将网格内的内容进行布局。在这篇文章中，我们将会介绍如何使用 CSS Grid 布局中的 justify-items 和 align-items 属性来控制网格内部的内容布局。
justify-items 属性
justify-items 属性用于控制网格内的子元素在水平方向上的位置。默认情况下，每个子元素都是水平居中显示的。该属性可以取以下几个值：
start：子元素紧贴着父容器的左边缘end：子元素紧贴着父容器的右边缘center：子元素水平居中于父容器内stretch(默认值)：子元素被拉伸以占据整个网格列
以下是一个简单的示例：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- -------------- ------- - ----- - ----------------- -------- -
-- -------------------- ---- ------- ---- ------------------ ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ------
在这个例子中，父容器 .container 是一个 3 x 3 的网格，每个单元格都是 100 像素宽高。我们使用 justify-items: center 属性将所有单元格水平居中。结果如下图所示：
如果我们将 justify-items 属性改为 start，则子元素将紧贴着父容器的左边缘：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- -------------- ------ - ----- - ----------------- -------- -
同理，当我们将 justify-items 属性设置为 end 时，子元素将紧贴着父容器的右边缘：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- -------------- ---- - ----- - ----------------- -------- -
当我们将 justify-items 属性设置为 stretch 时，子元素将被拉伸以占据整个网格列：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- -------------- -------- - ----- - ----------------- -------- -
align-items 属性
align-items 属性用于控制网格内的子元素在垂直方向上的位置。默认情况下，每个子元素都是垂直居中显示的。该属性可以取以下几个值：
start：子元素紧贴着父容器的顶部end：子元素紧贴着父容器的底部center：子元素垂直居中于父容器内stretch(默认值)：子元素被拉伸以占据整个网格行
以下是一个简单的示例：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- ------------ ------- - ----- - ----------------- -------- -
-- -------------------- ---- ------- ---- ------------------ ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ------
在这个例子中，我们使用 align-items: center 属性将所有单元格垂直居中。结果如下图所示：
如果我们将 align-items 属性改为 start，则子元素将紧贴着父容器的顶部：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- ------------ ------ - ----- - ----------------- -------- -
同理，当我们将 align-items 属性设置为 end 时，子元素将紧贴着父容器的底部：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- ------------ ---- - ----- - ----------------- -------- -
当我们将 align-items 属性设置为 stretch 时，子元素将被拉伸以占据整个网格行：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- ------------ -------- - ----- - ----------------- -------- -
总结
本文介绍了 CSS Grid 布局中的 justify-items 和 align-items 属性，这两个属性可以用来控制网格内子元素的水平和垂直位置。这两个属性是轻松实现网格布局的内部对齐的关键之一，同时也是开发者必须掌握的重要知识点。希望这篇文章能够帮助读者更好地理解和掌握 CSS Grid 布局。
完整代码请参考以下链接：https://codepen.io/akira-cn/pen/xxdQmJy
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf842b9e06631ab9bf201e