CSS Grid 是一种强大的布局工具，可以轻松地创建复杂的网格布局。但是，有时候我们需要在同一个网格单元格中对齐多个元素，这可能会有些棘手。在本篇文章中，我们将介绍一些技巧，帮助您在 CSS Grid 中实现这一目标。
网格单元格的基础
在开始讨论对齐多个元素之前，我们需要了解一些关于网格单元格的基础知识。在 CSS Grid 中，我们可以通过指定行和列的数量来创建一个网格。例如，下面的代码将创建一个 3 行 3 列的网格：
.container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); }
这将创建一个 3x3 网格，其中每个单元格都具有相同的宽度和高度。
我们可以使用 grid-row 和 grid-column 属性来指定元素应该在哪个单元格中显示。例如，下面的代码将一个元素放置在第一行第一列的单元格中：
.item { grid-row: 1; grid-column: 1; }
对齐单个元素
在 CSS Grid 中，我们可以使用 justify-self 和 align-self 属性来对齐单个元素。这两个属性都接受以下值：
start：将元素对齐到单元格的起始边缘。end：将元素对齐到单元格的结束边缘。center：将元素居中对齐。stretch：将元素拉伸以填充整个单元格。
例如，下面的代码将一个元素居中对齐：
.item { justify-self: center; align-self: center; }
对齐多个元素
现在，让我们来讨论如何在同一网格单元格中对齐多个元素。我们可以使用 grid-template-areas 属性来指定每个单元格应该包含哪些元素，并使用 grid-area 属性将元素放置在指定的区域中。
例如，下面的代码将两个元素放置在同一个单元格中：
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- -------------------- -- - -- -- - -- -- - --- - ------- - ---------- -- - ------- - ---------- -- - ------- - ---------- -- - ------- - ---------- -- -展开代码
在这个例子中，我们将网格分成了四个区域，分别是 a、b、c 和 d。我们将第一个元素放置在 a 区域中，将第二个元素放置在 b 区域中。由于它们都在同一单元格中，它们将被自动对齐。
对齐多个元素的一部分
有时候，我们可能只想对齐多个元素的一部分。在这种情况下，我们可以将这些元素放置在一个容器中，并将容器放置在所需的单元格中。
例如，下面的代码将两个元素放置在一个容器中，并将容器放置在 a 区域中：
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- -------------------- -- - -- -- - -- -- - --- - ---------------- - -------- ----- ---------------- ------- ------------ ------- - ------- - ---------- -- - ------- - ---------- -- - ------- - ---------- -- - ------- - ---------- -- -展开代码
在这个例子中，我们创建了一个名为 container-inner 的容器，并将两个元素放置在其中。我们将容器放置在 a 区域中，并使用 justify-content 和 align-items 属性将容器中的元素居中对齐。
结论
在 CSS Grid 中，对齐多个元素可能会有些棘手，但是我们可以使用 grid-template-areas 和 grid-area 属性来轻松地实现这一目标。如果我们只想对齐多个元素的一部分，我们可以将它们放置在一个容器中，并将容器放置在所需的单元格中。希望这篇文章能够帮助您在 CSS Grid 中更好地布局您的网页。
示例代码：https://codepen.io/pen/?template=ExvqjBM
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677c54fe5c5a933a343267ac
