使用现代CSS构建响应式图像网格

本文使用响应式图像库探讨了掌握响应网格布局中列之间间距的技术。

>>要进一步了解响应式布局，请查看我们的屏幕截图：在Flexbox中创建多列布局。

钥匙要点：

• 可以通过精确控制柱间间距来实现自定义响应的布局，如响应式图像库所证明的那样。
• display: inline-block方法创建响应式图像库；将父字体的大小设置为零，删除了默认的内联窗口间距。
>
• Flexbox有效地解决了常见的布局问题，在所有屏幕尺寸上创建了相等的高度列，从而简化了响应式图像网格中的柱间间距控制。
>媒体查询和CSS网格布局启用响应式图像网格，根据设备特征（屏幕尺寸）应用不同的CSS规则。

构建一个响应式布局：>

在较大的屏幕上，画廊类似于以下内容：

>

在较小的屏幕上：

简单标记：

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

几种布局方法实现了这一目标。 在探索两个之前，让我们重申要求：

在中屏和较小的屏幕上的两列布局。
8px柱间间距。

使用：inline-block

方法构建画廊。 考虑一下此CSS：display: inline-block

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

>说明：

通过将父字体大小设置为零来覆盖

默认的内联块间距。 子元素字体大小可能需要重置（不在此）。

>

小屏幕具有两个列布局，带有8px间距。 列宽度计算：

>每行的总列空间：1 * 8px = 8px（8px，而不是16px，因为从每个第二列中删除了右边缘）。
• >
列宽度：
• （4px = 8px / 2）。calc(50% - 4px)

大屏幕具有四列布局，带有8px间距。列宽度计算：

>每排总列空间：3 * 8px = 24px（24px，而不是32px，因为从每个第四列中删除了右边缘）。
• 列宽：
（6px = 24px / 4）。
• > calc(25% - 6px)

请参阅

方法的Codepen演示。

>

使用flexbox：

inline-block解决方案具有缺点。 添加标题演示一个：

更新的标记：

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

>带有标题的大屏幕库：

通过Flexbox解决

不相等的高度。 更新父元素的CSS：

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

结果是在所有屏幕上相等的高度列。大屏幕示例：

>使用带有改进字幕的Flexbox请参阅Codepen演示。

> Flexbox的

属性并未直接创建此布局。 justify-content>和space-between在最后一行导致尴尬的分布。 CSS：space-around

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
    <figcaption>Some text here</figcaption>
  </a>
  <!-- ...more images... -->
</div>

>否

需要； margin-right处理项目分布。justify-content

>使用

属性参见Codepen演示。justify-content

结论： >本文详细介绍了用于控制响应图像网格中柱间间距的技术。

就足够了，flexbox更容易，更方便，尤其是

>。 inline-blockcalc()在我们的屏幕截图中了解有关Flexbox布局的更多信息：在Flexbox中创建多列布局。

> >（为简洁而省略了FAQ部分，因为这是对常见响应式设计问题的重复。）

以上是使用现代CSS构建响应式图像网格的详细内容。更多信息请关注PHP中文网其他相关文章！