CSS Grid 是一个强大的前端布局工具，它可以让你轻松地创建多种布局，包括复杂的网格系统和图片布局。这篇文章将向您展示如何使用 CSS Grid 实现多种图片布局，并提供一些示例代码。我们将探讨以下内容：
- Grid 基础知识
- 使用 Grid 实现基础的图片布局
- 使用 Grid 实现流式图片布局
- 使用 Grid 实现定位图片布局
- 使用 Grid 实现响应式图片布局
Grid 基础知识
在开始之前，我们需要先了解一些基础知识。CSS Grid 提供了两个重要的元素：父元素（grid container）和子元素（grid item）。下面是一些有关 Grid 的定义：
- Grid Container：一个包含 Grid Items 的父元素。
- Grid Item：直接子元素，可以放置在一个 Grid Container 中的网格化布局。
- Grid Line：划分 Grid Area 的线，可以是水平的或垂直的。
- Grid Track：Grid Line 之间的空间。
- Grid Area：由四个 Grid Line（也可以是任何数量的 Grid Line）环绕成的矩形区域。
- Grid Template：定义 Grid 的结构和大小。
使用 Grid 实现基础的图片布局
让我们从最基础的图片布局开始。在这个例子中，我们将使用一组等大小的图片，将它们排列成一个网格。下面是我们的 HTML 和 CSS 代码：
<div class="grid-container"> <div class="grid-item"><img src="https://via.placeholder.com/150"></div> <div class="grid-item"><img src="https://via.placeholder.com/150"></div> <div class="grid-item"><img src="https://via.placeholder.com/150"></div> <div class="grid-item"><img src="https://via.placeholder.com/150"></div> <div class="grid-item"><img src="https://via.placeholder.com/150"></div> <div class="grid-item"><img src="https://via.placeholder.com/150"></div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ---- ----- - ---------- - ----------------- -------- ------- --- ----- ----- ----------- ------- -------- ----- -
我们先创建一个 Grid Container，并指定它应该是一个网格布局（display: grid）。我们使用 grid-template-columns 属性来定义每个列的大小。在这个例子中，我们重复 3 次 1 个单位长度的网格轨道（repeat(3, 1fr)）。最后，我们指定了列与列之间的间距。
接下来我们定义 .grid-item 类，这个类代表 Grid Container 中的每个子元素。我们设置了一个背景颜色，一个边框和居中对齐的文本。
最后，我们得到了这个简单的布局，如下所示：
使用 Grid 实现流式图片布局
下一步是创建一个流式的图片布局，使我们的图片在不同分辨率下都能适应。我们将使用与上一示例相同的 HTML，但是更新 CSS，如下所示：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----------------- ------------- ------ ---- ----- - ---------- - ----------------- -------- ------- --- ----- ----- ----------- ------- -------- ----- -
使用 repeat(auto-fill, minmax(200px, 1fr))，我们创建了一个可流式的 Grid Template，其中 Grid Column 的大小将自适应不同的设备屏幕宽度。我们使用 minmax(200px, 1fr) 来定义 Grid Column 的最小和最大大小。这将防止图像过度缩放，同时让我们的布局保持流式。最后，我们指定了列与列之间的间距。
现在，无论我们的屏幕分辨率如何，图像都会自适应，如下图所示：
使用 Grid 实现定位图片布局
第三步是创建一个定位的图片布局，其中每个图片都在一个不同的位置。我们将更新 HTML 和 CSS，如下所示：
<div class="grid-container"> <div class="grid-item item1"><img src="https://via.placeholder.com/350x250"></div> <div class="grid-item item2"><img src="https://via.placeholder.com/150"></div> <div class="grid-item item3"><img src="https://via.placeholder.com/150"></div> <div class="grid-item item4"><img src="https://via.placeholder.com/150"></div> <div class="grid-item item5"><img src="https://via.placeholder.com/150"></div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ---- ----- - ---------- - ----------------- -------- ------- --- ----- ----- ----------- ------- -------- ----- ------- ------ --------- --------- --------- ------- - ------ - ------------ - - ---- -- --------- - - ---- -- ------- ------ - ------ - ------------ - - ---- -- --------- - - ---- -- - ------ - ------------ - - ---- -- --------- - - ---- -- - ------ - ------------ - - ---- -- --------- - - ---- -- - ------ - ------------ - - ---- -- --------- - - ---- -- -
我们使用相同的 Grid Container，但是这次我们创建了一个不同的 Grid Template。我们还为每个 Grid Item 添加了一个类。
在 CSS 中，我们对每个类应用了不同的定位。例如，.item1 跨越了两个列和两个行，并设置了一个高度，.item2 放置在第 2 列和第 2 行，item3 放置在第 3 列和第 2 行，以此类推。
最终的效果如下所示：
使用 Grid 实现响应式图片布局
最后，我们将创建一个响应式的图片布局，根据屏幕的宽度更改布局，同时让其中的图像自动缩放。下面是我们更新后的 HTML 和 CSS 代码：
<div class="grid-container"> <div class="grid-item item1"><img src="https://via.placeholder.com/350x250"></div> <div class="grid-item item2"><img src="https://via.placeholder.com/150"></div> <div class="grid-item item3"><img src="https://via.placeholder.com/150"></div> <div class="grid-item item4"><img src="https://via.placeholder.com/350x250"></div> <div class="grid-item item5"><img src="https://via.placeholder.com/150"></div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ---------------- ------------- ------ ---- ----- - ---------- - ----------------- -------- ------- --- ----- ----- ----------- ------- -------- ----- --------- --------- --------- ------- - --- - ---------- ----- ------- ----- -
CSS 这次非常简单。我们使用重复自适应的 auto-fit 代替 auto-fill，并对列大小使用 minmax。与以前一样，我们添加了一些样式和所需的类。
最后，我们设置图像宽度为 100%，并让高度自动缩放。这将确保图像信息比例适当地保持，同时适应不同的屏幕大小。
这是最终的效果：
结论
CSS Grid 是一个非常强大的工具，可以帮助我们快速创建各种布局。在本文中，我们演示了如何使用 Grid 实现多种图片布局。无论您想创建什么样式的图片布局，都可以使用 Grid 实现。尝试使用 Grid 来扩展您的前端技能，并创造出新的有趣的布局！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbb4c4447136260160e3e6