CSS Snippets
A curated set of short CSS snippets you'll reach for again and again. Paste them straight into your stylesheet.
Centre anything
CSS
.center { display: grid; place-items: center; min-height: 100vh; }
Reset margins & box-sizing
CSS
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
Responsive card grid
CSS
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
Fluid heading size
CSS
h1 { font-size: clamp(28px, 4vw + 0.5rem, 56px); }
Truncate to one line
CSS
.title-1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Aspect-ratio video wrapper
CSS
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
Tip: Save your most-used snippets to a local notes app. The compounding speed-up over a year is huge.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Snippets</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Add the modern reset that makes box-sizing predictable.
*, *::before, *::after { box-sizing:
; }
The opposite of the historical default.
Discussion
Loading…