CSS Grid Layout （CSS Grid）是一个用来设计网格布局的强大工具。它可以让我们在网页中快速、灵活地创建网格，这使得布局变得简单、直观且可维护。
在本文中，我们将深入探讨如何在 CSS Grid 中布置一个网格，并提供代码示例和指导意义，使您可以轻松使用 CSS Grid。
什么是 CSS Grid?
CSS Grid是一种二维网格系统，在网页中以行和列的形式布置内容。每个区域都可以被命名、占据若干行或列甚至跨多个单元格。这种方法使得网页的布局变得更加灵活，且不需要使用繁琐的布局技巧（如浮动、定位等）进行组合。CSS Grid能够更好地组织内容，同时也能大大简化CSS代码。
如何在CSS Grid中布置一个网格
下面我们将展示如何在CSS Grid中布置一个简单的网格。我们将创建一个具有两列和两行的网格。每个单元格将放置一张照片和相应的说明文字。
准备工作
首先，打开您的文本编辑器，新建一个HTML文件，并在页面头部的 <head> 中引入样式表：
<link rel="stylesheet" href="style.css">
接下来，在HTML文件中创建以下结构：
-- -------------------- ---- -------
---- ------------------
---- -------------
---- ----------------------------------------- ---------- ---
----- -----
------
---- -------------
---- ----------------------------------------- ---------- ---
----- -----
------
---- -------------
---- ----------------------------------------- ---------- ---
----- -----
------
---- -------------
---- ----------------------------------------- ---------- ---
----- -----
------
------这里将使用一个 div 标签用于作为最外层的容器，其内部包含四个包含图片和说明文本的 div 标签。
创建网格
开始使用CSS Grid来创建网格，将它应用到 .container 类中。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
}这里使用 display: grid 来告诉浏览器使用CSS Grid来布局网格。 grid-template-columns 和 grid-template-rows 属性定义了网格的列和行的数量和宽度（或高度）。1fr 代表每列的宽度平分剩余空间。 auto 代表行的高度随内容自适应大小。gap 属性用于定义行和列之间的间距。
定位图片和文本
现在我们需要将图片和相关文本定位到网格中。通过以下CSS，我们可以对 .item 中的内容进行微调：
-- -------------------- ---- -------
----- -
----------------- -----
-------- -----
--------------- -------
---------------- -------
----------- -------
-
----- --- -
---------- -----
-首先，使用 .item 类定义单元格的样式，设置底纹颜色为灰色。接下来，使用 display: flex 和 flex-direction: column 使图片和文本垂直居中。最后，使用 text-align: center; 来使文本水平居中，通过使用 max-width: 100%; 确保图片宽度不超过其包含元素的宽度。
完整示例代码
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --- ----
------------------- ---- -----
---- -----
-
----- -
----------------- -----
-------- -----
--------------- -------
---------------- -------
----------- -------
-
----- --- -
---------- -----
--- -------------------- ---- -------
---- ------------------
---- -------------
---- ----------------------------------------- ---------- ---
----- -----
------
---- -------------
---- ----------------------------------------- ---------- ---
----- -----
------
---- -------------
---- ----------------------------------------- ---------- ---
----- -----
------
---- -------------
---- ----------------------------------------- ---------- ---
----- -----
------
------结论
通过这个简单的例子，您可以看到如何使用CSS Grid来创建一个网格布局。在实际应用中，您可以更加复杂的网格来实现您所需要的布局效果。 CSS Grid是一个十分强大、灵活、易用的工具，可以使您的样式和布局代码更加清晰有序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673560fa0bc820c5824e1860