Wanna see something cool? Check out Angular Spotify 🎧
All Articles

10 Modern CSS layout and sizing techniques

10 Modern CSS layout

This video from Una is amazing. You have to watch it. Below was the summary that I took from her video. You can try it live on 1linelayouts.glitch.me

10 Modern CSS layout and sizing techniques highlight just how robust and impactful a single-line of styling code can be.

1. Super Centered

place-items: center

10 Modern CSS layout and sizing techniques

2. The Deconstructed Pancake

flex: 0 1 <baseWidth>

10 Modern CSS layout and sizing techniques

3. Sidebar Says

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

10 Modern CSS layout and sizing techniques

4. Pancake Stack

grid-template-rows: auto 1fr auto

10 Modern CSS layout and sizing techniques

5. Classic Holy Grail Layout

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

10 Modern CSS layout and sizing techniques

6. 12-Span Grid

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

10 Modern CSS layout and sizing techniques

7. RAM (Repeat, Auto, Minmax)

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

10 Modern CSS layout and sizing techniques

8. Line Up

justify-content: space-between

10 Modern CSS layout and sizing techniques

9. Clamping My Style

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

10 Modern CSS layout and sizing techniques

10. Respect for Aspect

aspect-ratio: <width> / <height>

10 Modern CSS layout and sizing techniques

Published 25 Dec 2020

Recent Posts

Get the last items of an array using array.slice()

I never knew the slice method takes negative integers!

Build an Angular component to display snow ❄️ effect

The holiday session is coming. Let add a simple snow effect to your Angular application ❄️❄️❄️


Follow @tuantrungvo on Twitter for more!