1줄의 CSS로 만드는 모던 레이아웃

한 줄만으로도 유용한 레이아웃을 만들어주는 CSS 속성들
- 가운데로! → place-items: center
- 팬케이크 해체 → flex: [grow] [shrink] [baseWidth]
- 사이드바 → grid-template-columns: minmax([min],[max])
- 팬케이크 쌓기 → grid-template-rows: auto 1fr auto
- 클래식 웹 → grid-template: auto 1fr auto / auto 1fr auto
- 12-Span 그리드 → grid-template-columns: repeat(12, 1fr)
- RAM (Repeat, Auto, MinMax) → grid-template-columns: repeat(auto-fit, minmax([base], 1fr))
- 사이 간격 유지 → justify-content: space-between
- 스타일 유지 → width: clamp([min], [actual], [max])
- 비율 유지 → aspect-ratio → [width] / [height]

[xguru]

place-items 랑 팬케이크 들은 정말 유용하네요.