正方形中的徽標網格

創建雜誌Logo方格佈局：CSS Grid技巧詳解

本文將指導您如何使用CSS Grid創建一個靈活的、響應式的雜誌Logo方格佈局。這種佈局常用於展示捐贈者、贊助商或產品用戶等。使用正方形能夠有效處理不同尺寸、比例和視覺權重的Logo，避免佈局混亂。

1. 網格結構

使用Emmet快速創建HTML結構：

 <code>.grid>div*5>img</code>

按下Tab鍵，即可展開為：

<div class="grid">
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
</div>

2. CSS Grid基礎

採用靈活列技術：

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

這不僅創建了靈活的列，也使得列數可以根據屏幕大小自動調整。

3. 創建正方形

無需強制設置高度，使用偽元素和padding-bottom技巧：

 .grid > div {
  background: black;
  padding: 1rem;
}

.grid > div::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}

這將使每個網格項的高度與其寬度保持一致，形成完美的正方形。

4. 圖片疊加與居中

為了將圖片與偽元素疊加，再次使用Grid：

 .grid > div {
  /* ... */
  display: grid;
}
.grid > div::before,
.grid > div > img {
  grid-area: 1 / 1 / 2 / 2;
}

這將使偽元素和圖片都位於網格項的第一個單元格，實現疊加。

為了居中圖片，設置width: 100%; height: 100%; ，並使用object-fit: contain; ：

 .grid > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

5. 拖拽尺寸調整的異常

需要注意的是，當拖拽圖片時，圖片可能會出現變形。

6. 使用絕對定位替代

如果拖拽異常是一個問題，可以使用絕對定位：

方法一：

 .grid > div > img {
  position: absolute;
  max-width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

方法二：

 .grid > div > img {
  position: absolute;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

這兩種方法都能解決拖拽異常問題。

視頻教程

（此處應插入視頻鏈接，原文中未提供）

通過以上步驟，您可以輕鬆創建一個靈活且響應式的雜誌Logo方格佈局。 選擇適合您需求的圖片居中方法，確保最佳用戶體驗。

以上是正方形中的徽標網格的詳細內容。更多資訊請關注PHP中文網其他相關文章！