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/

Because I keep seeing `position: absolute` + lots of of offset + size + transform + sometimes even margin properties to stack + middle align the stacked items... you can easily do it with 3 #CSS properties!

https://mastodon.social/@anatudor/113774781963966085

#Development #Proposals
Item Flow (part 1) · A new CSS layout concept uniting Grid, Flexbox, and Masonry https://ilo.im/1631o0

_____
#Concept #Layout #CSS #CssGrid #CssFlexbox #Masonry #Design #WebDesign #WebDev #Frontend

Flip card on hover, flip back on hover out...

... but on touchscreens, flip it on click and then flip it back on second click!

A mostly #CSS solution, using #3D transforms, variables, grid, pointer MQ + a little bit of #JS.

Because somebody asked how to do it https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/

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

#cssWish That we could have a zero count for the number of columns in `repeat()`.

That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:

```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```

#Development #Proposals
CSS self gap · Custom gaps between some ‘flex’ or ‘grid’ items https://ilo.im/162wa9

_____
#Spacing #Layout #CssGrid #CssFlexbox #Browser #WebDev #Frontend #CSS

Ever wanted to get the number of auto-fit columns in CSS?

```
--u: 5em;
grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr))
```

It's now possible! Using registered #CSS vars, the tan division hack and container query units! Here's a little test on @codepen:
https://codepen.io/thebabydino/pen/JojpBJr

Because I saw a @codepen demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...

Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints https://codepen.io/thebabydino/pen/QwWQqeR

Because this quick @codepen thing I made is getting hearted for some reason... corner grid item with inner corner rounding and text wrapping around the corner

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

Some grid + shape-outside + container query units #CSS magic + #SVG #filter magic.

¯\_(ツ)_/¯

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

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

#Development #Techniques
CSS meets voxel art · Pushing the limits of 3D rendering with pure CSS https://ilo.im/162m4a

_____
#CssGrid #3D #Rendering #VoxelArt #VoxelEditor #WebDev #Frontend #CSS

Someone asked how to get such an offset grid for any number of items, so here's my take on it https://www.reddit.com/r/css/comments/1ixnjjr/comment/menz0yk/ - define a 2 col grid via grid-template-columns, make all items span 3 rows, then offset down the 2nd item (placed on the second column) by one row to start from the 2nd.

#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

#Development #Techniques
Faux containers in CSS grids · Decoupling the containing shape from its content https://ilo.im/162bo0

_____
#Layout #CSS #CssGrid #Browser #WebDev #Frontend

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

Because somebody asked, here's my take on the adaptive grid with a fixed row item spanning all columns https://www.reddit.com/r/css/comments/1ir2qp9/comment/mdrssnv/ - it all boils down to just 3 #CSS declarations as seen below.

Minimal @codepen example:
https://codepen.io/thebabydino/pen/pvogXOK?editors=1100

PSA: not setting `height: 100%` to begin with on an element that has a `padding` is a better way of avoiding overflow than the nuclear solution of setting `box-sizing: border-box` on everything.

Live comparison on @codepen:

https://codepen.io/thebabydino/pen/vEYOPPe?editors=1000

#Development #Techniques
Conditional CSS grid template areas · A magic formula to “open the gates to layout heaven.” https://ilo.im/161t0f

_____
#Layout #CssGrid #CssNesting #ContainerQueries #LogicalProperties #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

#Development #Releases
New capabilities for CSS ‘attr()’ · References to HTML attributes are getting more powerful https://ilo.im/161yw8

_____
#HTML #CSS #CustomProperties #CssGrid #Popovers #Chrome #Browser #WebDev