如何在 CSS Grid 中处理垂直和水平对齐
CSS Grid Layout 是一种旨在让开发人员更容易地设计网页布局的CSS模块，它可以创建具有复杂网格布局的页面。在开发过程中，垂直和水平对齐是很重要的设计要素，本篇文章将详细介绍在 CSS Grid 中如何处理垂直和水平对齐。
定义网格布局
在开始处理对齐之前，我们需要先在HTML和CSS中定义网格布局。要创建网格布局，我们首先需要设置一个父元素的display属性为grid：
.container {
display: grid;
}接下来，我们可以指定网格的几列和几行，例如：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}上面代码中，容器被分为三个等宽的列和两个高度为100px的行。
水平对齐
水平对齐特别适合处理项目（grid item）之间的宽度不同时。常见的情况是让他们靠左对齐或者靠右对齐。可以使用justify-content属性来实现。
对于容器中多个项目，我们可以使用justify-content属性来水平对齐所有项目。下面是一些常见的值及其含义：
.container {
display: grid;
justify-content:
start | end | center | stretch | space-between | space-around | space-evenly;
}- start：项目对齐容器的左边缘
- end：项目对齐容器的右边缘
- center：项目水平居中对齐
- space-between：每个项目之间留有相等的空白
- space-around：每个项目周围留有空白
- space-evenly：每个项目周围留有相等的空白
以下是一个示例，展示了如何使用justify-content: center;将所有项目水平居中对齐：
.container {
display: grid;
grid-template-columns: 100px 75px 125px;
justify-content: center;
}垂直对齐
垂直对齐在处理父元素和子元素高度不同时非常有用。而且，它不仅可以应用于子元素，还可以应用于连续的行。
有两个属性可以用于实现垂直对齐：align-items 和 align-content。
- align-items：用于平铺项目的行
- align-content：用于在容器内多行处于纵向上的位置
align-items属性
.container {
display: grid;
align-items:
stretch | start | end | center | baseline;
}让我们看看每个值的含义：
- stretch：当项目在垂直方向上未明确设置高度时，将使用此选项将它们拉伸以匹配行的高度
- start：将所有项目垂直对齐到纵向起点
- end：将所有项目垂直对齐到纵向终点
- center：将所有项目垂直居中对齐
- baseline：将所有项目对齐到基线。
以下是一个示例，我们将使用 align-items: center;对父元素中的所有项目进行垂直居中对齐：
.container {
display: grid;
align-items: center;
}align-content属性
.container {
display: grid;
align-content:
start | end | center | stretch | space-between | space-around;
}让我们看看每个值的含义：
- start：将所有行垂直对齐到纵向起点
- end：将所有行垂直对齐到纵向终点
- center：将所有行垂直居中对齐
- stretch：将所有行的高度拉伸以符合容器的高度
- space-between：在所有行之间留有相等的空格
- space-around：将所有行周围留有空白。
以下是一个示例，展示了如何使用 align-content: center;将所有行垂直居中对齐：
.container {
display: grid;
align-content: center;
}完整示例代码
下面是一个完整的示例代码，它演示了如何水平和垂直对齐项目和行：
-- -------------------- ---- ------- ---- ------------------ ---- ---------------- ------- ---- ---------------- ------- ---- ---------------- ------- ---- ---------------- ------- ---- ---------------- ------- ---- ---------------- ------- ---- ---------------- ------- ---- ---------------- ------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ---- ------ ------------------- --------- ------ ---------------- ------- ------------ ------- -------------- ------- - ----- - --------- - - -- - ----- - ------------ - - -- - ----- - --------- - - -- - ----- - --------- - - -- ------------ - - -- - ----- - --------- - - -- ------------ - - -- - ----- - --------- - - -- ------------ - - -- - ----- - --------- - - -- ------------ - - -- - ----- - --------- - - -- ------------ - - -- -
上面的示例代码中，我们定义容器为一个4行3列的网格，然后使用align-items: center;和justify-content: center;让所有项目在纵向上垂直及水平居中对齐。最后使用align-content: center;让整体在垂直方向上居中对齐。
我们可以将项目放在特定的行和列中，以创建更复杂的网格布局。
结论
在CSS Grid中处理垂直和水平对齐是设计的一个重要方面。使用align-items，justify-content和align-content属性可以实现对齐，并且可以让项目和行在不同的位置上协同工作。
希望这篇文章能帮助你在创建网站时确定了该如何处理垂直和水平对齐，以创建更美观的设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6735aa110bc820c5824fc3be