CSS Grid 是一种强大的布局方式，可以轻松实现画廊式布局。画廊式布局是一种常见的网站设计布局，它允许您在网站上显示多个项目，每个项目都有自己的图像和文本描述。在这篇文章中，我们将探讨如何使用 CSS Grid 实现画廊式布局，并解决垂直居中问题。
CSS Grid 基础
在开始之前，让我们快速回顾一下 CSS Grid 的基础知识。CSS Grid 基于网格布局，它允许您将网页分成多个区域，并在这些区域中放置元素。通过使用 CSS Grid，您可以轻松地创建复杂的布局，而无需使用复杂的 CSS 或 JavaScript 代码。
要创建一个 CSS Grid，您需要为父元素设置 display: grid; 属性。然后，您可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。例如，下面的代码将创建一个 3 列和 2 行的网格：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}这将创建一个包含 6 个网格区域的网格，每个区域都具有相同的宽度和高度。您可以使用 grid-column 和 grid-row 属性来指定元素应放置在哪个网格区域中。例如，下面的代码将一个元素放置在第一行的第二列中：
.item {
grid-column: 2 / 3;
grid-row: 1 / 2;
}这意味着该元素将跨越第二列和第三列，并且位于第一行。
实现画廊式布局
现在，我们已经了解了 CSS Grid 的基础知识，让我们看看如何使用它来实现画廊式布局。我们将创建一个包含多个项目的网格，每个项目都有自己的图像和文本描述。
首先，我们需要为父元素设置 display: grid; 属性，并使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。我们将创建一个 3 列和 2 行的网格，每个项目都占用一个网格区域。我们还将使用 gap 属性来定义项目之间的间隔：
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 20px;
}接下来，我们将为每个项目创建一个包含图像和文本描述的元素。我们将使用 grid-column 和 grid-row 属性来指定每个项目应该放置在哪个网格区域中。我们将使用 object-fit 属性来确保图像适合其容器，并使用 text-align 属性来居中文本描述：
-- -------------------- ---- -------
---- ----------------
---- -------------
---- ----------------- ---------- ---
-------- - ---------------
------
---- -------------
---- ----------------- ---------- ---
-------- - ---------------
------
---- -------------
---- ----------------- ---------- ---
-------- - ---------------
------
---- --- ---
------
-------
-------- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
---- -----
-
----- -
-------- -----
--------------- -------
---------------- -------
------------ -------
----------- -------
-
----- --- -
------ -----
------- -----
----------- ------
-
--------现在，我们已经创建了一个基本的画廊式布局。但是，如果您尝试在项目中包含更多文本，您可能会发现文本无法垂直居中。这是因为默认情况下，align-items 属性设置为 stretch，这意味着项目将在其网格区域中垂直拉伸，而不是居中。
解决垂直居中问题
为了解决垂直居中问题，我们可以使用以下 CSS 代码：
-- -------------------- ---- ------- ----- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- ----------- ------- - ----- - - - ----------- ----- -------------- ----- -
这将使项目中的所有元素垂直居中。我们使用 display: flex; 将项目设置为 Flexbox 容器，并使用 justify-content: center; 和 align-items: center; 将项目垂直和水平居中。然后，我们使用 margin-top: auto; 和 margin-bottom: auto; 将项目中的所有元素垂直居中。
示例代码
下面是完整的 HTML 和 CSS 代码，可帮助您更好地理解如何使用 CSS Grid 实现画廊式布局并解决垂直居中问题：
-- -------------------- ---- -------
---- ----------------
---- -------------
---- ----------------- ---------- ---
-------- - ---------------
------
---- -------------
---- ----------------- ---------- ---
-------- - ---------------
------
---- -------------
---- ----------------- ---------- ---
-------- - ---------------
------
---- --- ---
------
-------
-------- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
---- -----
-
----- -
-------- -----
--------------- -------
---------------- -------
------------ -------
----------- -------
-
----- - - -
----------- -----
-------------- -----
-
----- --- -
------ -----
------- -----
----------- ------
-
--------结论
通过使用 CSS Grid，您可以轻松地创建复杂的画廊式布局，并解决垂直居中问题。在本文中，我们回顾了 CSS Grid 的基础知识，展示了如何创建画廊式布局，并解决了垂直居中问题。我们希望这篇文章能够帮助您更好地理解 CSS Grid，并帮助您创建更好的网站布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760f29e03c3aa6a56075ad9