Invest with Cake DeFi and get guaranteed returns from your crypto assets. Register Now
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

Angular Jira Clone Part 08 - Create placeholder loading (like Facebook's cards loading)

My eight tutorial is to explain how to build a placeholder loading component

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!