如何使用 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 屬性用於將方塊的內容絕對定位在其中。

設定方塊之間的裝訂線

「padding-bottom」技巧也可用於在方塊之間建立排水溝：

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

這會添加10px每個方塊之間的間隙。

響應行為

要使佈局響應，可以使用媒體查詢將網格佈局更改為單列，以適應較小的屏幕尺寸：

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

這確保了正方形在窄螢幕上垂直堆疊。

結論

作者使用「padding-bottom」技巧，CSS Grid 和 Flexbox 都可用於建立響應式網格佈局，其中具有等高的正方形和間距。該技術被廣泛使用，並為這種常見的佈局要求提供了可靠的解決方案。

以上是如何使用 CSS Grid 和 Flexbox 建立具有等高正方形的響應式網格佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！