css

Best way to center content with css

The following is an easy way to align content in the center of the page without having to use breakpoints. .container { --container-margin: 2rch; --container-width: 65rch; max-width: min( calc(100dvw - var(--container-margin)), var(--container-width) ); margin: auto; } How it works 1. The rch is the relative character width as defined in

css

Nifty trick with CSS-variables

I was playing around with a list of links that could have three different states depending on whether the item was active or not. It was a bit more complex than what is shown below, but as it involved multiple values. And some needed to be the same, however at