首頁 > web前端 > css教學 > 主體

CSS:磚石佈局

Barbara Streisand
發布: 2024-11-07 16:06:03
原創
644 人瀏覽過

什麼是砌體佈局?

來自 MDN:

砌體佈局是一種佈局方法,其中一個軸使用典型的嚴格網格佈局(最常見的是列),另一個軸使用砌體佈局​​。在砌體軸上,不是堅持嚴格的網格,在較短的項目之後留下間隙,而是下一行中的項目上升以完全填充間隙。

pinterest.com 的版面就是一個典型的例子:

CSS: masonry layout

我們可以從 CSS 工具箱中使用什麼?

網格

我們使用簡單的 HTML 標籤:

<div>



<p>My first shot was grid & grid-template-column<br>
</p>

<pre class="brush:php;toolbar:false">.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}
登入後複製

CSS: masonry layout

反應能力很棒,但每張圖片下方都有間隙。

列數

接下來,使用column-count CSS容器屬性。

column-count CSS 屬性將元素的內容分成指定數量的欄位。

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}
登入後複製

CSS: masonry layout

不好。
當前佈局看起來符合預期,但圖像已縮放且不響應。雖然我們可以使用媒體查詢來控制回應能力,但我們的目標是提供更強大的解決方案。

使用列

columns CSS 簡寫屬性設定繪製元素內容時要使用的欄位數以及這些欄位的寬度。

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}
登入後複製

CSS: masonry layout

一行程式碼。太棒了!

這是如何運作的?

每列的最小寬度為 250px。如果有超過 250 像素的額外空間,則列將擴展以填充空間。如果空間減少,列數也會隨之減少。

附加功能

我們可以透過將版面配置設定為最多 X 列來限制列數:

.photos {
  columns: 250px 2;
  ...
  ...
}
登入後複製

CSS: masonry layout

使用


不僅僅限於砌體影像佈局。我們也可以使用它來設定文字列的樣式:相同的 CSS,不同的內容。

CSS: masonry layout

最後的想法

這有幫助嗎?
您的用例是什麼?

以上是CSS:磚石佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板