#subgrid — Public Fediverse posts

#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

#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

#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.

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

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

Brand New Layouts with CSS Subgrid

https://www.joshwcomeau.com/css/subgrid/

#HackerNews #CSS #Subgrid #Web #Design #Layouts #Grid #Layouts #Frontend #Development #Responsive #Design

Brand New Layouts with CSS Subgrid

https://www.joshwcomeau.com/css/subgrid/

#HackerNews #CSS #Subgrid #Web #Design #Layouts #Grid #Layouts #Frontend #Development #Responsive #Design

oh yes - now I understand #css #subgrid better #webkit
https://webkit.org/blog/17339/subgrid-how-to-line-up-elements-to-your-hearts-content/

Help? 😟

Stupid #CSS #layout question: why isn't my #subgrid respected?

https://codepen.io/thebabydino/pen/xbGeReB

#code #coding #frontend #cssGrid #web #dev #webDev #webDevelopment #cssLayout

Help? 😟

Stupid #CSS #layout question: why isn't my #subgrid respected?

https://codepen.io/thebabydino/pen/xbGeReB

#code #coding #frontend #cssGrid #web #dev #webDev #webDevelopment #cssLayout

Irregular shaped image with both convex & concave roundings. Shape depends on other elements, how they scale/ wrap. Flexible layout depending on viewport.

Because someone asked how to
https://www.reddit.com/r/css/comments/1k60u7w/comment/momcgkp/

Live on @codepen https://codepen.io/thebabydino/pen/LEExpVg

#CSS #subgrid + #SVG #filter magic.

#code #coding #frontend #svgFilter #layout #web #dev #webDev #webDevelopment #cssLayout #cssGrid

Irregular shaped image with both convex & concave roundings. Shape depends on other elements, how they scale/ wrap. Flexible layout depending on viewport.

Because someone asked how to
https://www.reddit.com/r/css/comments/1k60u7w/comment/momcgkp/

Live on @codepen https://codepen.io/thebabydino/pen/LEExpVg

#CSS #subgrid + #SVG #filter magic.

#code #coding #frontend #svgFilter #layout #web #dev #webDev #webDevelopment #cssLayout #cssGrid

ОБЗОР СОВРЕМЕННЫХ ВОЗМОЖНОСТЕЙ CSS. Subgrid

Subgrid — это возможность использовать сетку (grid) внутри дочерних элементов, сохраняя структуру родительской сетки. Задача: Создать макет сетки с изображениями, где вложенные группы элементов адаптируются по ширине родительской сетки, сохраняя гибкость отступов. Некоторым группам необходимо задать индивидуальные стили — отступы и цвет фона, чтобы визуально выделить их на фоне остальных. Нам нужно чтобы во втором ряду элементы начинались со второй колонки и последний элемент становился четвертой колонкой, а четвертый ряд обладал другим фоном и другими отступами:

https://habr.com/ru/articles/898570/

#css #grid #subgrid #html #frontend #frontendразработка #web #css3 #вебразработка #webпрограммирование

A super simple little #CSS #subgrid example on @codepen:

https://codepen.io/thebabydino/pen/QwWNwOz

#cssLayout #cssGrid #code #coding #web #frontend #webDevelopment #webDev #dev

A super simple little #CSS #subgrid example on @codepen:

https://codepen.io/thebabydino/pen/QwWNwOz

#cssLayout #cssGrid #code #coding #web #frontend #webDevelopment #webDev #dev

#CSS subgrid help?

Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the same fixed height for description on all card rows

repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿

#subgrid #cssLayout #cssGrid #gridLayout #layout #code #coding #frontend #help #web #dev #webDev #webDevelopment

#CSS subgrid help?

Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the same fixed height for description on all card rows

repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿

#subgrid #cssLayout #cssGrid #gridLayout #layout #code #coding #frontend #help #web #dev #webDev #webDevelopment

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights.

https://www.reddit.com/r/css/comments/1itgf3h/comment/mdsg2bh/

Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below.

Live on @codepen

https://codepen.io/thebabydino/pen/QwWNwOz?editors=0100

#CSS #layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment #subgrid

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights.

https://www.reddit.com/r/css/comments/1itgf3h/comment/mdsg2bh/

Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below.

Live on @codepen

https://codepen.io/thebabydino/pen/QwWNwOz?editors=0100

#CSS #layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment #subgrid

Someone asked (yet again) on reddit for that inverted radius tab pattern so here's a pure #CSS solution from me https://www.reddit.com/r/css/comments/1ioroke/comment/mcp0xpj/

✨ no extra elements or pseudos needed for effect
✨ only need to set border, background, border-radius

If you also want borders, I made another (hopefully accessible) tabs pattern demo using #SVG #filter and #subgrid to answer another reddit question last year https://www.reddit.com/r/css/comments/1fwlmsy/comment/lqfvkuh/

#cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment #layout

Someone asked (yet again) on reddit for that inverted radius tab pattern so here's a pure #CSS solution from me https://www.reddit.com/r/css/comments/1ioroke/comment/mcp0xpj/

✨ no extra elements or pseudos needed for effect
✨ only need to set border, background, border-radius

If you also want borders, I made another (hopefully accessible) tabs pattern demo using #SVG #filter and #subgrid to answer another reddit question last year https://www.reddit.com/r/css/comments/1fwlmsy/comment/lqfvkuh/

#cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment #layout

OH SHIT! IT LIVES!

#css #subgrid

Found the solution, I think, to the overflowing at mobile sizes, it’s an additional `min()` inside the grid.
https://youtu.be/aKFB5Bjk6KM?si=WWKt5tpzQIM3Atc1
@ min 18:00
Thanks, @kevinpowell #subgrid #CSS #CSSGrid #cssLayout

Found the solution, I think, to the overflowing at mobile sizes, it’s an additional `min()` inside the grid.
https://youtu.be/aKFB5Bjk6KM?si=WWKt5tpzQIM3Atc1
@ min 18:00
Thanks, @kevinpowell #subgrid #CSS #CSSGrid #cssLayout

…And just to round out the scenario, it looks like some of the image alignment can be simplified using the recently supported #subgrid of CSS (like four months ago!).

https://youtu.be/IIQa9f0REtM?si=HbPECne0K63FGD1v&t=261

#CSS #CSSGrid #cssLayout

…And just to round out the scenario, it looks like some of the image alignment can be simplified using the recently supported #subgrid of CSS (like four months ago!).

https://youtu.be/IIQa9f0REtM?si=HbPECne0K63FGD1v&t=261

#CSS #CSSGrid #cssLayout

More on this #Chrome #CSS #subgrid support. I can "Error code: 5" crash a full tab just by applying `grid-template-columns: subgrid;` to an element. Frustrating!

More on this #Chrome #CSS #subgrid support. I can "Error code: 5" crash a full tab just by applying `grid-template-columns: subgrid;` to an element. Frustrating!

@Meyerweb @chriscoyier Float is an issue itself
#flex #grid #subgrid

@Meyerweb @chriscoyier Float is an issue itself
#flex #grid #subgrid

#CSS #Subgrid #support (CSS Grid Layout Module Level 2)
https://caniuse.com/css-subgrid

```
@supports not (grid-template-columns: subgrid) {
{ display: none } /* xD */
}
```

Finally Subgrid support in Chrome! But uh oh… using #CSS #subgrid - and when I say using, I mean literally just writing one line: `grid-template-rows: subgrid` - makes #Chrome take ages (4-6 seconds) to re-draw the layout upon window resize. #Firefox does this without dropping a frame.

Early adoption isn't what I'd hoped.

Finally Subgrid support in Chrome! But uh oh… using #CSS #subgrid - and when I say using, I mean literally just writing one line: `grid-template-rows: subgrid` - makes #Chrome take ages (4-6 seconds) to re-draw the layout upon window resize. #Firefox does this without dropping a frame.

Early adoption isn't what I'd hoped.

Looking at Web Platform Tests, it seems like `subgrid` is starting to land in Chrome. 🎉😱🥳

#css #subgrid

https://wpt.fyi/results/css/css-grid/subgrid?label=master&product=chrome%5Bexperimental%5D&product=chrome%5Bbeta%5D&product=firefox%5Bexperimental%5D&product=safari%5Bexperimental%5D&aligned&view=interop&q=label%3Ainterop-2022-subgrid

Looking at Web Platform Tests, it seems like `subgrid` is starting to land in Chrome. 🎉😱🥳

#css #subgrid

https://wpt.fyi/results/css/css-grid/subgrid?label=master&product=chrome%5Bexperimental%5D&product=chrome%5Bbeta%5D&product=firefox%5Bexperimental%5D&product=safari%5Bexperimental%5D&aligned&view=interop&q=label%3Ainterop-2022-subgrid