在前端开发中，布局是一个非常重要的部分。而经典的 4 栏图片布局是一种非常常见的布局方式。在本文中，我们将介绍如何使用 CSS Grid 实现这种布局，并提供示例代码和详细的指导。
关于 CSS Grid
CSS Grid 是一种用于网页布局的 CSS 模块。它可以让我们以一种更直观的方式来布局网页，而不需要使用传统的 float 或者 position 属性。
CSS Grid 可以将网页分成多个网格，并在这些网格中布局我们的元素。这种方式可以让我们更容易地控制元素的位置和大小，从而实现更复杂的布局。
实现 4 栏图片布局
接下来，我们将介绍如何使用 CSS Grid 实现经典的 4 栏图片布局。这种布局方式通常用于展示图片和相关的描述信息。
HTML 结构
首先，我们需要一个包含图片和描述信息的 HTML 结构。这里我们使用一个简单的 div 元素来包含每一个图片和描述信息：
-- -------------------- ---- -------
---- -----------------------
---- ------------------
---- ---------------- ---------- ---
-------------- -----
------
---- ------------------
---- ---------------- ---------- ---
-------------- -----
------
---- ------------------
---- ---------------- ---------- ---
-------------- -----
------
---- ------------------
---- ---------------- ---------- ---
-------------- -----
------
------CSS 样式
接下来，我们需要使用 CSS Grid 来布局这些元素。首先，我们需要创建一个包含 4 列的网格。我们可以使用 grid-template-columns 属性来实现这一点：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}这里，我们将整个容器分成了 4 列，并且每一列都有相同的宽度。
接下来，我们需要让每个 div 元素占据整个网格中的一个单元格。我们可以使用 grid-column 属性来实现这一点：
.grid-item {
grid-column: span 1;
}这里，我们将每个元素设置为占据一个单元格。
最后，我们需要让每个元素垂直居中，并添加一些间距。我们可以使用 justify-content 和 align-items 属性来实现这一点：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- --- --- ---- ---------------- -------------- ------------ ------- ---- ----- - ---------- - ------------ ---- -- -
这里，我们使用 justify-content: space-between; 来让每个元素之间有一些间距。同时，我们使用 align-items: center; 来让每个元素垂直居中。最后，我们使用 gap: 20px; 来添加一些间距。
完整代码
-- -------------------- ---- -------
---- -----------------------
---- ------------------
---- ---------------- ---------- ---
-------------- -----
------
---- ------------------
---- ---------------- ---------- ---
-------------- -----
------
---- ------------------
---- ---------------- ---------- ---
-------------- -----
------
---- ------------------
---- ---------------- ---------- ---
-------------- -----
------
------
-------
--------------- -
-------- -----
---------------------- --- --- --- ----
---------------- --------------
------------ -------
---- -----
-
---------- -
------------ ---- --
-
--------总结
使用 CSS Grid 实现经典的 4 栏图片布局非常简单。我们只需要使用 grid-template-columns 属性来创建一个包含 4 列的网格，然后使用 grid-column 属性让每个元素占据一个单元格即可。
同时，我们还可以使用 justify-content 和 align-items 属性来控制元素的间距和垂直居中。这种布局方式非常适合展示图片和相关的描述信息。
希望本文对你有所帮助，如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513dd1a95b1f8cacdc50ffb