Design Atlas▦Layout
Bento grid, masonry, 8pt grid — ways to divide and arrange a screen. — 36 entries
Flexbox alignment플렉스박스 정렬
The two-axis rule for positioning flex items: justify-content on the main axis, align-items on the cross axis.
CSS grid areasCSS 그리드 영역
Name grid cells instead of numbering them (grid-template-areas), so a layout reads like an ASCII picture of itself.
auto-fill vs auto-fit
repeat(auto-fill, …) leaves empty tracks in place; repeat(auto-fit, …) collapses them so the remaining items stretch — the crux of media-query-free responsive grids.
Intrinsic sizing내재적 크기
Three sizing keywords where the content itself — not the container — decides how wide a box should be: min-content, max-content, fit-content().
Sticky footer스티키 푸터
A footer that sits at the bottom of the viewport when content is short, and simply follows the content down when it's long.
Multi-column layout멀티 컬럼
Flow text across several newspaper-style columns automatically — a single columns declaration does it.
Stack layout스택 레이아웃
A layout primitive that manages the gap between vertically stacked elements from exactly one place — proposed by Heydon Pickering and Andy Bell's Every Layout.
Cluster layout클러스터 레이아웃
Wraps items of varying width — tags, buttons — with a uniform gap in every direction. Just flex-wrap plus gap.
Sidebar layout사이드바 레이아웃
A fixed-width sidebar plus a main area that fills the rest — with no media query, it stacks vertically on its own once space runs out.
Switcher layout스위처 레이아웃
Flips between a horizontal row and a vertical stack based purely on its own container width — no media query involved.
Cover layout커버 레이아웃
Keeps a central element vertically centered no matter which surrounding elements exist — powered entirely by margin-block: auto.
Frame layout프레임 레이아웃
Locks content with an unpredictable native ratio — a photo, a video — into a fixed aspect-ratio frame, cropping the overflow.
Reel layout릴 레이아웃
A single row that scrolls horizontally without ever wrapping — the classic shape of a Netflix thumbnail row.
Z-stackZ 스택
Overlap several elements in the same grid-area to stack layers without ever reaching for position: absolute.
Logical properties논리적 속성
Properties phrased in terms of text flow — inline-start / inline-end — instead of left / right, so they follow automatically when the language switches to RTL or a vertical writing mode.
Clamp-based sizing클램프 레이아웃
clamp(min, preferred, max) grows and shrinks a value smoothly between two bounds, proportional to the viewport — with zero media queries.
Overflow & scroll containers오버플로우와 스크롤 컨테이너
Four overflow values that decide what happens when content is bigger than its box — let it spill, clip it, or turn it into a scrollbar.
Card grid카드 그리드
The practical pattern behind most card grids: repeat(auto-fit, minmax(…)) decides the column count itself, no fixed card count required.
Bento grid벤토 그리드
A layout that packs differently sized cells into one tight grid, like compartments in a Japanese bento box.
Masonry메이슨리
A multi-column layout that packs cards of varying heights tightly, like bricks — Pinterest is the classic example.
Holy grail layout홀리 그레일 레이아웃
The classic five-region page: header, left nav, main content, right sidebar, footer.
8pt grid8pt 그리드
A spacing rule where every margin, padding and size is a multiple of 8 (8, 16, 24, 32…) — so designers and developers agree on numbers instead of eyeballing them.
12-column grid12분할 그리드
Divide the width into 12 equal columns; every element declares how many columns it spans. The web's default grid system.
Golden ratio황금비
A 1 : 1.618 proportion where the ratio of the longer part to the shorter equals the ratio of the whole to the longer — used since classical painting and architecture.
Rule of thirds삼분할 법칙
Place the important element near one of the four intersection points formed by dividing the frame into thirds both ways — a photo and video framing basic.
Whitespace여백
The empty space between elements — not "nothing", but a design tool that signals what belongs together and what matters most.
Split screen스플릿 스크린
A layout that divides the screen into two side-by-side (or stacked) panels, each carrying its own content or a contrasting message.
Sticky header스티키 헤더
A header that stays pinned to the top of the viewport as you scroll. Made with a single position: sticky.
Off-canvas오프캔버스
A panel that hides off-screen and slides in from an edge on demand — the mechanism behind the mobile hamburger menu.
Container queries컨테이너 쿼리
CSS that reacts to the size of an element's own container — not the viewport. The same card can lay itself out differently depending on where it's placed.
Breakpoints브레이크포인트
The width thresholds at which a layout switches wholesale — the lines that divide mobile, tablet and desktop.
Asymmetric layout비대칭 레이아웃
A composition that deliberately shifts weight to one side instead of mirroring it — trading static symmetry for tension and a directed eye path.
Full bleed풀 블리드
The body text stays narrow and centered while a chosen image stretches edge to edge. Named after print, where ink "bleeds" past the trim edge of the page.
Broken grid브로큰 그리드
Set up an invisible grid, then deliberately let elements cross its lines — overlap, tilt, spill past the edge. An editorial layout technique.
Aspect ratio종횡비
Locks an element's width-to-height proportion so it holds steady as its width changes — one line, aspect-ratio: 16 / 9.
Gutter거터
The fixed gap between columns in a grid or multi-column layout — not the columns themselves, but the space between them.