Lmst

Đã 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/

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

🌖 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

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

Screenshot of linked demo with subgrid elements not aligned to parent grid.

CSS Subgrid Tutorial: A Comprehensive Guide to Advanced Grid Layouts

https://fed.brid.gy/r/https://forem.com/mechcloud_academy/css-subgrid-tutorial-a-comprehensive-guide-to-advanced-grid-layouts-2g4i

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

Screenshot of one of the possible layouts, the one for the wide screen case in particular.

ОБЗОР СОВРЕМЕННЫХ ВОЗМОЖНОСТЕЙ 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

Screenshot of the demo, with DevTools open, highlighting the grid areas and gaps.

#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

Shows 6 cards distributed 3 at the top and 3 at the bottom. The `grid-template-rows` value for the cards wrapper is `repeat(3, auto)`. This gets inherited on the individual cards via subgrid. It succeeds in giving the corresponding card components the same height for cards on the same row, however, the card components have different heights depending on the row they're on. The description component for example, has a height of `224px` for the top cards and a height of `116px` for the bottom cards.

Shows 6 cards distributed 3 at the top and 3 at the bottom. The `grid-template-rows` value for the cards wrapper is `repeat(6, auto auto auto)`. This gets inherited on the individual cards via subgrid. It succeeds in giving the corresponding card components the same height for *all* the cards, however this means lots of unnecessary grid tracks and space created at the bottom for wider viewports where we can have multiple cards side by side.

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

Screenshot showing the page with grid overlays. DevTools is open on the right, showing the relevant code.

```
main, article { display: grid }

main { grid-template: repeat(3, max-content)/ repeat(auto-fit, min(35ch, 100%)) }

article {
grid-row-end: span 3;
grid-template-rows: 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

The visual result on the right and the relevant code for my solution:

```
a {
/* reserve space for a transparent border */
border: solid $r #0000;
/* reset border-width on the right */
border-right-width: 0;

/* corner rounding for pill shape only non-zero on the left */
border-radius: 50vh 0 0 50vh;

background:
/* cover padding area respecting its rounding on the left */
linear-gradient($c 0 0) padding-box,
/* create that rounding in transparent bottom border area */
radial-gradient(farthest-side at 0 100%,
#0000 calc(100% - .5px),
$c calc(100% + .5px))
100% 100%/ #{$r $r} no-repeat border-box
}
```

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

…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

CSS Subgrid is fantastic. It makes a basic centred column layout so easy.

#css #grid #layout #subgrid

body {
margin: unset;
display: grid;
grid-template-columns:
[--viewport-start]
minmax(1rem, 1fr)
[--content-start]
minmax(320px, 85ch)
[--content-end]
minmax(1rem, 1fr)
[--viewport-end];
}

body > :is(header, footer) {
display: grid;
grid-template-columns: subgrid;
grid-column: --viewport-start / --viewport-end;
}

:is(body, header, footer) > .content {
grid-column: --content-start / --content-end;
}

🔵🟠 Using CSS subgrid to design advanced layouts
by Ibadehin Mojeed @ibaslogic at @LogRocket
#css #subgrid #webdev

https://blog.logrocket.com/using-css-subgrid-design-advanced-layouts/

Blue text on orange background:
Using CSS subgrid to design advanced layouts

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

#SubGrid

Client Info