Lmst

#CssSubgrid

🚀 Wow, get ready to revolutionize your layouts with CSS Subgrid! 🎉 Because who doesn't want to juggle more grid syntax while praying for browser support? 🙄 Dive into the thrilling peril of 'nested grid numbers' and 'subgrid gotchas'—sounds like a fun Saturday night, right? 😂
https://www.joshwcomeau.com/css/subgrid/ #CSSSubgrid #CSSLayout #WebDevelopment #BrowserSupport #GridDesign #HackerNews #ngated

#Development #Examples
Brand new layouts with CSS subgrid · “Subgrid unlocks exciting new layout possibilities.” https://ilo.im/168p12

_____
#CssGrid #CssSubgrid #Layouts #Grids #Browser #Design #WebDesign #WebDev #Frontend #CSS

#Development #Guides
Building a multi-stage timetable · How modern CSS powers a cutting-edge layout https://ilo.im/168i5y

_____
#ModernCSS #CssGrid #CssSubgrid #ScrollDrivenAnimations #Calendar #Browser #WebDev #Frontend #HTML #CSS

Concave rounding header. Shape on the right depends on content on the left. Real transparency. Using #CSS subgrid and #SVG filters.

Live demo on @codepen https://codepen.io/thebabydino/pen/mdNeKwE

How would you do this? Try to think about it before checking my solution!

#cssGrid #cssLayout #cssSubgrid #coding #svgFilter #filter #frontend #code #web #dev #webDev #webDevelopment

Screenshot. Shows a page with a header having on the right and image shaped in steps depending on the size of the content on the left. The steps are rounded at both the convex and concave corners.

Real transparency behind text/ around scrollable image. Shape with both convex and concave roundings changes as the text reflows. No JS, text isn't split into a span per line.

Can you figure out how to do this before checking out my solution? https://www.reddit.com/r/css/comments/1ojp1da/comment/nm589sd/

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

#CSS #concave #cssLayout #cssGrid #web #cssSubGrid #SVG #filter #svgFilter #code #coding #dev #webDevelopment #webDev #frontend

#Development #Techniques
Tabs with ‘details’, grid, and subgrid · A modern HTML/CSS approach using no hacks https://ilo.im/167ye4

_____
#HtmlDetails #CssGrid #CssSubgrid #Accessibility #Browsers #WebDev #Frontend #HTML #CSS

#Development #Techniques
Untangling nested interactive elements · How CSS subgrid helps solve a common issue https://ilo.im/166j78

_____
#Links #Buttons #CSS #CssSubgrid #Accessibility #WebDev #Frontend

#Development #Techniques
Enhancement of a simple layout · Smarter layout flow using CSS subgrid https://ilo.im/165g9x

_____
#Layout #Columns #Browser #FluidDesign #WebDesign #WebDev #Frontend #CSS #CssGrid #CssSubgrid

Saw https://www.youtube.com/watch?v=An3QMWg3m1c linked last evening & gave the challenge a quick go myself.

My approach was a mostly #CSS one, with minimal HTML (no extra wrappers) and JS (used only to update top item index, ~200 bytes minified).

While it was working, it wasn't pretty, so today I polished the demo & heavily commented the CSS - check it out on @codepen: https://codepen.io/thebabydino/pen/jENaPjd

#cssGrid #cssSubgrid #cssMaths #Maths #code #coding #frontend #web #dev #webDev #webDevelopment #cssLayout #cssVariables

We add a `.shape` element which in also covers all of the 4 cells of its parent's grid and also inherits its `.back` parent grid via `subgrid`.

This element creates our shape via two pseudos positioned in the 1st grid cell (clipped) and across the 2nd column (avoiding heading).

#CSS #layout #cssLayout #cssGrid #cssSubgrid #code #coding #frontend #web #dev #webDev #webDevelopment

We create a 2×2 header grid with the height of the 2nd row and the width of the 1st column given by the dimensions of the element (the heading) in the cell where they meet.

We also have another `.back` element covering all 4 grid cells & inheriting parent grid via `subgrid`.

2×2 grid on header.

`.back` stretches across all grid cells & inherits this grid.

Heading just in bottom left cell.

#CSS #layout #cssLayout #cssGrid #cssSubgrid #frontend #code #coding #web #webDev #dev #webDevelopment

Screenshot showing the grids highlighted via DevTools. The width of the first column is given by the amount of text content inside the heading.

#Development #Techniques
How to align column rows with CSS subgrid · Aligning content of boxes that sit side by side https://ilo.im/15ydwz

_____
#Layout #WebDev #Frontend #CSS #CssGrid #CssSubgrid

If you're a $5+ patron on Patreon, I've just posted a very special and cool interactive demo. With explanations about the concepts it illustrates + the demo itself is heavily commented as the viewport-adaptive layout part is very interesting too.

https://www.patreon.com/posts/swap-channels-98985162

#svg #svgFilter #css #cssLayout #code #cssSubgrid #containerQuery #cssGrid #coding #webDev #webDevelopment #frontend