如何使用 CSS Grid 和 Flexbox 创建具有等高正方形的响应式网格布局？

具有等高正方形的响应式网格布局

简介

创建具有响应式正方形的网格布局可能是一个挑战，尤其是在尝试维护时正方形之间的高度和间距相等。虽然 CSS Grid 和 Flexbox 都可以用于此目的，但本文将探讨如何使用 CSS Grid 和“padding-bottom”技巧来实现此目的。

设置高度等于宽度

使用 CSS 网格

要使用 CSS 网格将正方形的高度设置为等于其宽度，请应用“padding-bottom”技巧，该技巧会创建一个伪元素，以保持长宽比广场。可以应用以下 CSS 规则：

.square-container {
  display: grid;
  grid-template-columns: 30% 30% 30%;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

这可确保无论内容是什么，正方形都保持正方形。

使用 Flexbox

要使用 Flexbox 实现相同的效果，可以使用类似的方法：

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

在 Flexbox 中，content 属性用于将正方形的内容绝对定位在其中。

设置 Gutter方块之间

“padding-bottom”技巧也可用于在方块之间创建装订线：

.square-container {
  gap: 10px;  /* Set the gap between squares */
}

这会在每个方块之间添加 10 像素的间隙。

响应行为

要使布局响应，可以使用媒体查询将网格布局更改为单列，以适应较小的屏幕尺寸：

@media (max-width: 600px) {
  .square-container {
    grid-template-columns: 100%;
  }
}

这可确保方块垂直堆叠

结论

通过使用“padding-bottom”技巧，CSS Grid 和 Flexbox 都可以用来创建响应式网格布局，它们之间有等高的正方形和间距。该技术被广泛使用，并为这种常见的布局要求提供了可靠的解决方案。

以上是如何使用 CSS Grid 和 Flexbox 创建具有等高正方形的响应式网格布局？的详细内容。更多信息请关注PHP中文网其他相关文章！