Cover image for 10x CSS

10x CSS

pp profile image Paweł Ludwiczak ・2 min read

This post is just a collection of some CSS tricks and magic I've learned about over the last couple months.

background-repeat: space|round

When you have tiles-type background and you don't a tile to be cut-off.

Source: CSS-Tricks.


Having sticky header (or nav) is pretty common UI pattern. But it's a bit tricky when your app also has anchor links (https://....#section) that users use to navigate between page sections. Header will likely overlay part of the section that user navigated to. scroll-margin-top will help with this.

Source: Bram.us

resize: both

It's not really surprising you can use resize: ... to define how users can resize the textarea (it's the little handle in the bottom right corner). But what I think is pretty cool about it is you can use it elsewhere - for example on iframe - which I personally found very useful when testing responsiveness on certain elements.

Source: Bram.us


Nifty shorthand for two properties.

place-items: center;
/* ...instead of: */
align-items: center;
justify-items: center;

Source: MDN


Another shorthand:

inset: 10px 20px 30px 40px;
/* ...instead of: */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;

It has similar syntax to margin or padding, so you can also use it like this:

inset: 10px 20px;
/* ...instead of: */
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;

Source: MDN

user-select: all

Not crazy useful but it's a nice proof of concept. You can use a user-select: all trick to select, for example, a code snippet on click.

Source: Coder's Block (there's actually much more info about this property in general)


If you have ever tried to use vh units you probably know how "tricky" things get on mobile, especially webkit-based browsers. Below is a really nice trick to make things more predictable.


I have no idea if this could be any useful but I thought it's interesting 😂.


One of the best things about CSS grid is grid-gap. It's something I've been missing on flexbox but looks like it's coming: gap will be universal property that can work on both - grid AND flexbox. Browser support is pretty poor as of today but... Hey! It's coming!

Posted on by:

pp profile

Paweł Ludwiczak


I'm a Product Designer, here at Forem (DEV).


markdown guide