The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

01 / 23

Even Flex Lines with flex-wrap: balance

Greedy wrapping fills the first line and strands whatever is left, which is how a four-item nav ends up three across with one alone underneath. flex-wrap: balance asks the browser to spread the items evenly over the lines it needs instead — four items become two and two. Drag the panel's right edge to move the wrap point and watch the two lists disagree. Chrome 150 is the first to ship it, so the balanced list falls back to wrap elsewhere and says so.

csslayoutflexboxprogressive enhancementflex-wrap

02 / 23

Stop Layout Jump with scrollbar-gutter

When content grows enough to need a scrollbar, the browser carves that width out of the element and everything inside shifts sideways. scrollbar-gutter: stable reserves the gutter up front, so the scrollbar appears into space that was already set aside and nothing moves. Both panels here gain and lose the same content — only the left one lurches.

csslayoutscrollingscrollbar-gutterlayout shift

03 / 23

Smooth Collapsing Sidebar with Flexbox Fixes

This demo illustrates how to create a collapsing sidebar that transitions smoothly, preventing text labels from wrapping and icons from squashing during the animation. It uses `white-space: nowrap` for labels and `flex-shrink: 0` for icons, combined with width and opacity transitions.

animationcsslayoutflexboxtransitionsidebardashboard

04 / 23

Highlighted Pricing Card

A three-column pricing table where the middle, 'popular' plan stands out with a larger scale, a glowing gradient border, and an accent badge. Numeric figures are aligned using tabular numbers for a clean, consistent look.

csslayouttypographygradientcardpricingtransform

05 / 23

Flexbox Expanding Gallery on Hover

A responsive gallery where hovering over a panel expands it, causing other panels to gracefully shrink. This effect is achieved purely with CSS flexbox and transitions, leveraging the `flex` property.

animationcsslayouthoverflexboxgallery

06 / 23

CSS Grid Bento Layout

This demo illustrates how to create a flexible 'Bento Grid' layout using CSS Grid, where tiles of varying sizes snap together. The core technique involves defining a grid, allowing specific tiles to span multiple columns and rows, and utilizing `grid-auto-flow: dense` to automatically fill any empty spaces.

csslayoutresponsivegridbentodense-packing

07 / 23

Performant CSS Animations: Transform vs. Left

This demo illustrates the performance difference between animating an element's 'left' property and its 'transform: translateX()' property. Animating 'left' forces the browser to re-calculate layout on every frame, leading to a 'janky' or stuttering effect. In contrast, 'transform: translateX()' allows the browser to offload the animation directly to the GPU, skipping layout and paint, resulting in a smooth 60fps animation.

animationcsslayoutperformancetransformgpu

08 / 23

Pure CSS Sticky Header in a Scroll Container

A header that smoothly sticks to the top of its parent scrollable container as content scrolls underneath, achieved purely with CSS position: sticky and without any JavaScript. This snippet demonstrates common pitfalls and correct implementation.

csslayoutscrollstickypositionnojsheader

09 / 23

Readable Line Length with `ch` unit

This trick demonstrates how to improve text readability by limiting line length using the CSS `ch` unit. Long lines make text hard to follow, while `max-width: 65ch` creates an ideal measure for comfortable reading.

csslayoutresponsivetypographyreadability

10 / 23

CSS Text Wrap: Balance & Pretty

This UI trick uses the new `text-wrap` CSS property to intelligently balance headlines and prevent orphaned words in paragraphs. Applying `text-wrap: balance` makes multi-line headings visually symmetrical, while `text-wrap: pretty` prevents a single word from appearing alone on the last line of a paragraph, enhancing readability and design aesthetics with zero extra markup.

csslayouttypographytextui-uxreadability

11 / 23

Minimal Data-Ink Bar Chart

A minimalist bar chart design demonstrating the data-ink principle. It highlights a single key data point with an accent color and direct labels, removing all 'chart junk' like gridlines, axes, and excessive borders for improved readability and focus.

csslayouttypographychartminimalismdataviz

12 / 23

Tabular Numbers for Aligned Prices

This trick ensures numbers in a column align perfectly, especially decimal points, by using fixed-width digits. It contrasts the default 'proportional-nums' where digits like '1' are narrower than '0', causing a subtle wobble in price columns, with 'tabular-nums' for a precise, 'audited' look.

csslayouttypographytableprecisionnumbers