使用 CSS 的图像网格

在网站设计中，图像网格常被用于展示相册、产品列表等多个图片块的情况。通常，我们会使用 JavaScript 或 jQuery 来布置图像网格，而本文主要介绍如何使用 CSS 来实现图像网格布局。

步骤一：准备图片

首先，准备需要展示的图片。可以使用自己的素材库或者使用网上提供的免费图片。在示例中，我们使用的是 Unsplash 免费提供的图片资源。

步骤二：HTML 结构

使用 HTML 创建网格的结构，可以使用 <div> 元素包裹每个图片和图片的相关信息。

<div class="grid">
  <div class="grid-item">
    <img src="./images/pic1.jpg" alt="">
    <h3 class="title">My Picture Title</h3>
    <p class="description">Some Description here</p>
  </div>
  <div class="grid-item">
    <img src="./images/pic2.jpg" alt="">
    <h3 class="title">My Picture Title</h3>
    <p class="description">Some Description here</p>
  </div>
  <div class="grid-item">
    <img src="./images/pic3.jpg" alt="">
    <h3 class="title">My Picture Title</h3>
    <p class="description">Some Description here</p>
  </div>
  <div class="grid-item">
    <img src="./images/pic4.jpg" alt="">
    <h3 class="title">My Picture Title</h3>
    <p class="description">Some Description here</p>
  </div>
  <div class="grid-item">
    <img src="./images/pic5.jpg" alt="">
    <h3 class="title">My Picture Title</h3>
    <p class="description">Some Description here</p>
  </div>
</div>

步骤三：CSS 样式

接下来，我们使用 CSS 添加样式来布置整个图像网格。

首先，我们要创建网格容器：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

上述代码中，我们使用 display: grid 来创建网格容器，grid-template-columns 来设置每列的宽度，使用了 repeat(auto-fill, minmax(..., ...)) 来让列数量自动适应屏幕大小。grid-auto-rows 设置每行的高度，grid-gap 用来设置各个网格之间的间距。

接下来，我们可以用下面的代码来设置网格项目的样式：

.grid-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
}

.grid-item img {
  display: block;
  width: 100%;
  height: auto;
}

.grid-item .title {
  margin: 10px;
}

.grid-item .description {
  margin: 10px;
}

上述代码设置了网格项目的样式：使用了 display: flex 和 flex-direction: column 将图片、标题和描述纵向排列，使用了 justify-content: flex-start 来让文本从网格项目的顶部开始排列。background-color, border-radius, overflow 用来设置网格项目整体的样式。.grid-item img 用来设置图片样式。.grid-item .title, .grid-item .description 分别用来设置标题和描述的样式。

效果展示

完成上述步骤后，我们获取到的效果如下所示：

总结

使用 CSS 实现图像网格布局，可以使页面加载速度加快，而且还可以更好地控制图片大小、间距等属性。我相信，学习了本文后，您一定可以轻松完成图像网格的布局。