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

Flexy flex layout for any number n of items such that we have:

at most 3 items on a row
at least 2 items on a row IF we have at least 2 items in total

In only 5 (display, flex-wrap, gap, flex and flex-basis override) CSS declarations, working for any number n of items!

Because someone asked for this on reddit https://www.reddit.com/r/css/comments/1jayx5v/comment/mhq2ldw/

Here is the @codepen demo https://codepen.io/thebabydino/pen/OPJOepJ

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

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

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/

I made a thing: scroll-driven, almost pure #CSS infinite circular gallery rotation - check it out on @codepen
https://codepen.io/thebabydino/pen/XJrYqGb

Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.

Made with for this week's #CodePenChallenge.

cc @bramus

Here's a little thing I made for the 1st #CodePenChallenge of '25: pure #CSS tilt & zoom grid on scroll!

Check it out on @codepen

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

Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.

Chromium only.