跳至主要内容

Responsive Diamond Grid 💎

· 閱讀時間約 1 分鐘
ViPro

Pure CSS responsive diamond grid layout.

Responsive Diamond Grid 💎

一堆數學。

原本用 2 個 item 1 組,發現如果最後一行為奇數個時排版就會有問題,所以改成 4 個 1 組,用 2:1 的矩形佔位,這樣最後 1 組就能夠正常排列。

💡 Issues:

  • container 窄於 1 組的寬度時 n + 2, n + 3, n 會溢位跑版。 睡一覺就用 min-width: var(--placeholderX); 修好了。