Layouts modernos com 1 linha de CSS

Propriedades CSS que criam layouts úteis com apenas uma linha

• Ao centro! → place-items: center

• Pancake desmontado → flex: [grow] [shrink] [baseWidth]

• Barra lateral → grid-template-columns: minmax([min],[max])

• Pilha de panquecas → grid-template-rows: auto 1fr auto

• Web clássica → grid-template: auto 1fr auto / auto 1fr auto

• Grid de 12 spans → grid-template-columns: repeat(12, 1fr)

• RAM (Repeat, Auto, MinMax) → grid-template-columns: repeat(auto-fit, minmax([base], 1fr))

• Manter espaçamento entre itens → justify-content: space-between

• Manter o estilo → width: clamp([min], [actual], [max])

• Manter proporção → aspect-ratio → [width] / [height]

[xguru]

place-items e os pancakes são realmente muito úteis.