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

> Clean Markdown view of GeekNews topic #2580. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=2580](https://news.hada.io/topic?id=2580)
- GeekNews Markdown: [https://news.hada.io/topic/2580.md](https://news.hada.io/topic/2580.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-08-03T10:34:10+09:00
- Updated: 2020-08-03T10:34:10+09:00
- Original source: [web.dev](https://web.dev/one-line-layouts/)
- Points: 16
- Comments: 1

## Topic Body

한 줄만으로도 유용한 레이아웃을 만들어주는 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]

## Comments



### Comment 2478

- Author: xguru
- Created: 2020-08-03T10:34:32+09:00
- Points: 1

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