Layouts com 1 linha de CSS

Layouts modernos que mostram o quão impactante uma única linha de código CSS pode ser.

Um projeto inspirado em 1-Line Layouts

Grade ao Centro

place-content: center

Comando Lateral

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

Padrão Maciota

grid-template-rows: auto 1fr auto

Santo Graal

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

RAM (repeat, auto-fit, minmax)

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

RAM 2 (repeat, auto-fill, minmax)

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

Clamor pelo clamp

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

Bye Bye Bootstrap

grid-template-columns: repeat(12, 1fr)
Artigo: Porque CSS Grid é melhor que Bootstrap para criar layouts

flex-grow 9999

flex-grow: 9999
Para mais informações, leia nosso artigo completo.

Grid flex flexível

flex: 1 1 <flex-basis>