Layouts Responsivos

10 Layouts que destacam o quão robusto e impactante uma única linha de código CSS pode ser.


Tente mover os containers!

01. Super Centered

place-items: center

Codepen

Hello!

02. The Deconstructed Pancake

flex: 0 1 <baseWidth>

Codepen
1
2
3

03. Sidebar

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

Codepen
Min: 50px
Max: 25%

Lorem ipsum dolor sit amet consectetur adipisicing elit.

04. Pancake Stack

grid-template-columns: auto 1fr auto

Codepen
Header
Main
Footer

05. Classic Layout

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

Codepen
Header
Sidebar
Main
Sidebar
Footer

06. 12-Span Grid

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

Codepen
Span 12
Span 6
Span 4
Span 2

07. RAM (Repeat, Auto, Minmax)

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

Codepen
1
2
3
4

08. Line Up

justify-content: space-between

Codepen

Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

09. Clamping My Style

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

Codepen

Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

10. Respect for Aspect

aspect-ratio: <width> / <height>

Codepen

Video Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.