Grid's auto-fit and auto-fill are super useful, and while the declaration is pretty long, and can seem complicated, it's not so bad once you break it down.

✅ Auto-fill vs. auto-fit demo: https://codepen.io/kevinpowell/pen/yyLYoZO
✅ More on getting started with Grid: https://youtu.be/rg7Fvvl3taU

.grid {
display: grid;
gap: var(--gap, 1rem);
grid-template-columns: repeat(
var(--grid-type, auto-fit),
minmax(min(180px, 100%), 1fr)
);
grid-auto-rows: 120px auto auto;
container-type: inline-size;
}

⌚ Timestamps
00:00 - Introduction
00:25 - The basics of grid columns
02:30 - Using the repeat syntax
03:15 - Breaking down repeat auto-fit
05:45 - Preventing overflow
08:00 - Use a variable for the minimum value
08:45 - How to remember this declaration
11:25 - The difference between auto-fit and auto-fill

Styling, UX, validation

Collection of the most essential transitions for web apps that you can just copy and paste into any project.

Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.

Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.

https://x.com/technmak/status/2022287404128973056?s=43&t=gAZhA3-2h2DvLb-eSzGa5A

Learn how to use line-height units when setting paragraph margins — creating vertical rhythm in your text.

My favorite thing to do with the lh unit is to set margins on content. Let’s set a new universal margin on paragraphs with:

p { margin-block: 1lh; }

Learn how to use native CSS nesting in modern browsers. Understand the & selector, specificity rules, differences from Sass, and when to use nesting with practical examples for components, themes, and accessibility.

Here's where things get a little interesting. CSS nesting follows the same specificity rules as traditional CSS, with one important detail: the & nesting selector calculates its specificity like the :is() pseudo-class it uses the highest specificity from the parent selector list, not the sum of all the selectors.

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll share all of the tips and tricks I’ve learned for using it effectively. ✨

Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.

Generate and customize CSS easing functions with ease and magical precision using Easing Wizard 🧙

A concise guide to CSS backdrop-filter for glassmorphism and translucent overlays — how it works, why order matters, and an interactive CodePen playground.

A CSS reset for modern web development to provide a consistent and high-quality base for projects. Low-specificity and very opinionated to provide a strong foundation allowing seamless use in projects of varying scales and complexity.

• Element selectors keep styles as global as possible

• ID selectors identify things (one per page)

• Class selectors classify things
  Quite often, I’ll style those child elements using a descendant selector:

  # video > p

• Attribute selectors vary things

  .layout { […] }
  [data-layout="bartok"] { […] }

Apparently you are not a real CSS dev if you don’t maintain your own CSS reset. Challenge accepted! Not a typical reset, but for sure a bunch of opinions.

List style position

https://mayank.co/blog/css-reset-layer/

A web component for drawing patterns with CSS

https://cascadiajs-2025.netlify.app/23-starting-style/

A fast paced, animated, and jam packed tik-talk on CSS features from the past ~5 years. CSS has moved so fast, don't feel bad you aren't all caught up, no one is. This talk will teach you as many things as possible while providing good examples of practical use cases. Syntax, typography, color, architecture, and more.

00:00 - Introduction & Overview
01:20 - Page & View Transitions
03:04 - Range Syntax & Media Queries
03:51 - Container Queries & Units
06:04 - Cascade Layers
07:53 - Field Sizing with CSS
09:30 - Color Scheme: Light & Dark Modes
11:47 - Accent Color & Input Styling
12:34 - Type-Safe CSS Variables (app property)
15:14 - Scroll-Driven Animations
16:41 - View Animations & Intersection Observer Alternatives
18:21 - Advanced Easing with linear()
18:57 - Native Search Element
19:27 - Improved Form Validation
20:38 - Exclusive Accordions & Animating Height
21:34 - Math Functions in CSS
22:28 - Text Wrap: balance & pretty
24:47 - Color Mix & Color Spaces
25:51 - Relative Color & Dynamic Palettes
28:01 - Custom Scrollbar Styling
28:13 - Starting Style & Animating Entrances
28:37 - Dialogs, Popovers & Anchor Positioning
29:29 - Textbox Trim & Button Alignment
29:52 - Conclusion & Takeaways

Grid is a powerful, flexible tool that brings complex layouts to life.

Make your links beautiful and accessible.

The principle of 8pt Grid is that use multiples of 8 (8, 16, 24, 32, 40, 48, 56, etc.) to layout, dimensions, padding, and margin of elements.

Related Articles:
https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179
https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632
https://blog.prototypr.io/the-8pt-grid-consistent-spacing-in-ui-design-with-sketch-577e4f0fd520

Declan Chidlow takes us on a really interesting tour of the often, under-reported world of print stylesheets, how to use them and also how to debug them.

Physical, absolute units

When we’re writing CSS, we tend to use relative, responsive units such as rem, em, etc, which scale based on user preferences and such.
Sometimes, I find myself forgetting that CSS even has units of standard, absolute measurements, but we have a lovely collection at our disposal. It is worth keeping in mind they aren’t always accurate on screen, but they usually are when physically printed.

An interactive guide to learn CSS Relative Colors.