Help?

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

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

#Development #Techniques
Safe align your content · The CSS ‘safe’ keyword is worth knowing https://ilo.im/164jgu

_____
#CSS #Layout #Container #Alignment #WebDev #Frontend #CssGrid #CssFlexbox

If a grid has `n` columns, it has `n - 1` gaps in between them. Enjoy this interactive @codepen demo illustrating the concept: https://codepen.io/thebabydino/pen/LEVqOpZ

#Development #Previews
A new way to style gaps · Say hello to consistent separators across CSS layouts https://ilo.im/164kgh

_____
#Layout #Chrome #Edge #Browser #WebDev #Frontend #CSS #CssGrid #CssFlexbox #CssMultiColumn

I made a little thing on @codepen :pure #CSS #scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.

Inspiration https://x.com/avanderpotte/status/1923382432784412771
(via @codrops motion highlights roundup)

cc @bramus

#Design #Guides
Figma’s new grid · How the shift to CSS Grid affects designers https://ilo.im/163twe

_____
#Figma #Layout #CssGrid #ProductDesign #UiDesign #WebDesign #Development #WebDev #Frontend #CSS

#Development #Techniques
The CSS height enigma · Unraveling the mystery of percentage-based heights https://ilo.im/163u5k

_____
#Layout #CssUnits #CssGrid #CssFlexbox #WebDev #Frontend #HTML #CSS

A little pill shape. Because someone asked how to do this, I had to come up with a solution that uses no extra elements for the rounded side decorations, but also doesn't replace the 4 extra elements with at least just as many background layers.
https://www.reddit.com/r/css/comments/1ke0n1q/comment/mqhm6o0/

#Development #Releases
CSS ‘reading-flow’ and ‘reading-order’ · New properties to make visual order accessible https://ilo.im/163mvw

_____
#Layout #Accessibility #Keyboard #CssGrid #CssFlex #Chrome #Browser #WebDev #Frontend #CSS

#Development #Approaches
Out of order · How to deal with visual reordering issues in CSS? https://ilo.im/163d1y

_____
#Layout #CSS #CssGrid #CssFlexbox #DesignSystem #WebDesign #WebDev #Frontend #DOM #JavaScript

Haven't had it in me to do anything for the past week's #CodePenChallenge, so here's a demo from earlier this year that fits: #CSS infinite scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb

One of my most hearted demos ever & my only one to get over 1000 without being in the most hearted of previous year.

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.

Here's a quick responsive clover layout on @codepen https://codepen.io/thebabydino/pen/RNwmjEQ?editors=0100

#Development #Previews
First look at the modern attr() · A new way to use CSS with HTML data attributes https://ilo.im/16357k

_____
#Data #HTML #CSS #InlineCSS #CssGrid #Chrome #Browser #WebDev #Frontend #JavaScript

Starting to get the hang of and jive with CSS Grid for this new project I've been working on for the past week

How would you create this in such a way that its individual parts can be scaled independently, including via #CSS animations/ transitions?

Here's my take on it https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/