CSS Grid：两行代码实现不等高的响应式图片布局-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要进行图片布局设计。而对于不同大小、不同高度的图片布局，往往会出现排布不整齐的情况，影响页面整体美感。在这样的情况下，CSS Grid成为了一个非常好的解决方案，我们可以用仅仅两行代码实现不等高的响应式图片布局。本文将详细介绍CSS Grid技术，并提供示例代码和指导意义。

理解CSS Grid

在CSS中，Grid布局是一个比较新的CSS布局形式，可以通过在一个元素上建立一个网格，从而实现复杂的布局设计，这个元素就叫做一个网格容器（Grid Container）。在网格容器中，其子元素成为网格项（Grid Item），每一个网格项可以占据一个或多个网格单元格（Grid Cell）。

下面的代码段用来创建一个网格容器：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

上面我们定义了一个名为.container的容器，通过display: grid;属性将其定义为一个网格布局容器。我们通过grid-template-columns属性来定义列的个数和大小，grid-template-rows属性来定义行的个数和高度，grid-gap属性来定义行和列之间的间隔距离。

实现不等高的响应式图片布局

接下来我们介绍如何使用CSS Grid实现不等高的响应式图片布局。

在这里，我们将列的大小设置为相等的，并且用行的高度来决定图片的高度。这是因为在不等高的情况下，我们不能预知每个图片的高度，而行的高度可以自适应图片，避免了排布的不整齐。

以下是实现不等高的响应式图片布局的两行代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
}

解释一下上面的代码：

grid-template-columns属性中的repeat(auto-fit, minmax(250px, 1fr))表示重复放置行，并将行的最小宽度限制在250px，分配剩余的空间给剩下的行。
grid-gap属性表示网格之间的间距。

同时，我们还需要将图片的宽度设为100%：

.container img {
  width: 100%;
}

这样，不等高的响应式图片布局就实现了，如下图所示：

示范代码

接下来，我们把以上所述的代码放在一起，形成一个完整的示例代码片段。

<div class="container">
  <img src="https://cdn.jsdelivr.net/gh/xiaolinzi711/Articles/butterfly-2392984_1280.jpg" alt="">
  <img src="https://cdn.jsdelivr.net/gh/xiaolinzi711/Articles/butterfly-244216_1280.jpg" alt="">
  <img src="https://cdn.jsdelivr.net/gh/xiaolinzi711/Articles/butterfly-374872_1280.jpg" alt="">
  <img src="https://cdn.jsdelivr.net/gh/xiaolinzi711/Articles/butterfly-2465510_1280.jpg" alt="">
  <img src="https://cdn.jsdelivr.net/gh/xiaolinzi711/Articles/butterfly-176882_1280.jpg" alt="">
  <img src="https://cdn.jsdelivr.net/gh/xiaolinzi711/Articles/butterflies-1815355_1280.jpg" alt="">
</div>

-- -------------------- ---- -------
---------- -
  -------- -----
  ---------------------- ---------------- ------------- ------
  --------- -----
-

---------- --- -
  ------ -----
-

总结

本文介绍了CSS Grid技术，以及如何使用仅仅两行代码实现不等高的响应式图片布局。在实际开发中，我们可以使用CSS Grid解决更加复杂的布局问题。CSS Grid技术还有很多深入的知识值得了解和学习，希望可以对读者有所启发，让大家写出更美观、易于维护的代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64aa05f348841e9894635382