# 유용한 1줄 CSS 레이아웃

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=5430](https://news.hada.io/topic?id=5430)
- GeekNews Markdown: [https://news.hada.io/topic/5430.md](https://news.hada.io/topic/5430.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-11-25T09:17:01+09:00
- Updated: 2021-11-25T09:17:01+09:00
- Original source: [1linelayouts.glitch.me](https://1linelayouts.glitch.me/)
- Points: 7
- Comments: 1

## Topic Body

- Super Centered { place-items: center }

- The Deconstructed Pancake { flex: 0 1 <baseWidth> }

- Sidebar Says { grid-template-columns: minmax(<min>, <max>) ... }

- Pancake Stack { grid-template-rows: auto 1fr auto }

- Classic Holy Grail Layout { grid-template: auto 1fr auto / auto 1fr auto }

- 12-Span Grid { grid-template-columns: repeat(12, 1fr) }

- RAM (Repeat, Auto, Minmax) { grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr)) }

- Line Up { justify-content: space-between }

- Clamping My Style { clamp(<min>, <actual>, <max>) }

- Respect for Aspect { aspect-ratio: <width> / <height> }

## Comments



### Comment 7661

- Author: xguru
- Created: 2021-11-25T09:18:01+09:00
- Points: 1

딱 1줄이라고 하긴 뭐하지만.. 유용해 보이네요.