使用現代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中文網其他相關文章！