Mastodawn

#Safari drives me crazy when it comes to #CSS subgrids. Safari does not apply the subgrid spacing correctly. It recognizes the entire #subgrid span correctly, but the missing spacing causes the subgrid to collapse.

I don't understand how such a giant corporation, with so many users and a corresponding market share, fails to implement web standards properly. I feel like Safari is the new Internet Explorer.

#webstandards #w3c #apple #browser #grid

Buntwerker 🤘 🎨 ☮️ ☯️Feb 10

#html #css #grid #subgrid

Stecke fest … hat jemand Lösungsvorschläge?

Dass die #items aneinander kleben, ist gewollt. Es geht um die Bilder der Notizhefte und T-Shirts, die ich gerne mittig platzieren möchte. Alle infrage kommenden Eigenschaften mit "center" habe ich durch. Wenn es sich mit einer anderen Angabe beißt, finde ich die nicht.

Buntwerker 🤘 🎨 ☮️ ☯️Feb 10

Bin der Verzweiflung nahe … 😞

Ich kriege das mit dem #grid und #subgrid NICHT hin 😠

Quasi wortwörtlich von #SelfHTML übernommen, will es bei mir partout nicht funktionieren.

So viele Jahre schon mit #HTML und #CSS unterwegs, aber dieser neumodische Kram bringt mich noch um den Verstand. In der Theorie hübsch, aber in der Praxis eine Qual.

Gleich baue ich wieder Tabellen!!!

Reddit Tech VN Bot Jan 24

Đã tái tạo SubGrid thành một PWA dễ thương, hoạt động offline, đồng bộ dữ liệu qua thiết bị với xác thực passkey (không mật khẩu, không email). Cài được trên điện thoại và máy tính. Cảm ơn hoangvu12 vì ý tưởng gốc! #PWA #SubGrid #snoutpink #ứng_dụng_nhẹ #công_nghệ #passkey #offlineapp #Angular #FastAPI

https://www.reddit.com/r/SideProject/comments/1qlh1po/i_rebuilt_subgrid_as_a_cute_pwa/

Ana Tudor 🐯Dec 22

Concave rounded shape (real transparency, no covers) on @codepen https://codepen.io/thebabydino/pen/KwMPrMM

`clip-path`/ `mask` on the image have no idea about the dimensions of corner elems. We need another way to create the shape taking into account how those elements are resized by text reflow.

No magic numbers and no media/ container queries. Instead, we use #subgrid to add the cutout areas to a frame and on #SVG filters to round the shaped frame & to extract just the shaped image.

#CSS #filter #frontend

GripNews Nov 26

🌖 CSS Subgrid 帶來全新佈局的可能性
➤ 利用 CSS Subgrid 克服傳統 Grid 限制，實現更精確且語意化的網頁排版
✤ https://www.joshwcomeau.com/css/subgrid/
本文深入探討了 CSS Subgrid 的強大功能，它能將父層 Grid 佈局延伸至 DOM 樹中的子元素，進而實現更靈活、更語意化的網頁佈局。作者透過實際範例，說明瞭 Subgrid 如何解決傳統 Grid 佈局在處理巢狀結構時遇到的限制，例如在語意化標記（如使用 `<ul>` 包裹圖片）後，物件便能準確地對齊父層 Grid 中的各個儲存格，而非擠壓成單一儲存格。文章也解釋了 Subgrid 的基本原理，包括如何透過 `grid-row`、`grid-column` 指定共享範圍，以及為何子元素需要 `display: grid` 才能繼承父層佈局。此外，作者還提及了 Subgrid 的潛在陷阱和兼容性問題，並引用了相關資源供讀者深入學習。
+ 太棒了！一直覺得 CSS Grid 在處理嵌套元素時有點麻
#CSS #Grid #Subgrid #Web 開發

Brand New Layouts with CSS Subgrid • Josh W. Comeau

Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid unlocks exciting new layout possibilities, stuff we couldn’t do until now. ✨