CSS Superpowers: 10 single-line Layouts

I recently came across an extremely useful video about CSS tips and tricks made by Una Kravets on the Google Chrome Developers Youtube channel: 10 modern layouts in 1 line of CSS. I think the title speaks by itself. Let’s see how to create 10 single-line layouts!

First and foremost, have a look at the video, it is very detailed and nicely explained ;)

If you want to give it a try, go to the Glitch demo page: 1linelayouts.glitch.me

And if you are lazy, here is a quick recap:

1. Super Centered

How to (finally) center an element both horizontally and vertically.

place-items: center

A responsive layout to display elements horizontally on wide screens and stack them up nicely on mobile.

flex: 0 1 <baseWidth>

A 2-columns template with a column having min and max width depending on your screen width.

grid-template-columns: minmax(<min>, <max>) ...

A vertical layout with adapting height for header and footer.

grid-template-rows: auto 1fr auto

A full layout, with adpating height for header and footer plus adapting width for left and right sidebars.

grid-template: auto 1fr auto / auto 1fr auto

The classic 12 columns template, without Bootstrap ;)

grid-template-columns: repeat(12, 1fr)

A bit similar to #2, but with a different behaviour, especially when using auto-fit or auto-fill.

grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

For me, the most elegant solution to align elements with different content sizes.

justify-content: space-between

How to replace 3 media queries by 1 line of code to set different behaviours depending on the screen size.

clamp(<min>, <actual>, <max>)

No more calculations or set width and auto height to respect the element aspect ratio.

aspect-ratio: <width> / <height>

I hope you found it useful, feel free to buy me a coffee (or tea) to support the blog :)