Bố cục hiện đại chỉ với 1 dòng CSS

Các thuộc tính CSS giúp tạo ra những bố cục hữu ích chỉ với một dòng

• Căn giữa! → place-items: center

• Tách bánh pancake → flex: [grow] [shrink] [baseWidth]

• Thanh bên → grid-template-columns: minmax([min],[max])

• Xếp chồng pancake → grid-template-rows: auto 1fr auto

• Web cổ điển → grid-template: auto 1fr auto / auto 1fr auto

• Lưới 12 cột → grid-template-columns: repeat(12, 1fr)

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

• Giữ khoảng cách giữa các phần tử → justify-content: space-between

• Giữ kiểu dáng → width: clamp([min], [actual], [max])

• Giữ tỷ lệ → aspect-ratio → [width] / [height]

[xguru]

place-items và pancake thật sự rất hữu ích.