Layout Systems

Lesson 9

Layout is where most developers hit a wall when prompting AI. Describing a grid in terms of CSS properties — “grid-template-columns: 2fr 1fr 1fr” — works, but it’s fragile. The more powerful approach is to describe the layout by its visual shape.

Describe what you see, not the CSS

Instead of “make a 3-column grid with the first item spanning 2 columns,” try:

Create a magazine-style layout.
The first article is large and takes up the left 2/3 of the grid.
To the right, stack 2 smaller articles vertically.
Below the large article, place 2 more articles side by side.
Use CSS Grid. Gap 12px. Dark background cards with white text.

AI handles the grid-column and grid-row math. You describe the design intent.

Masonry layout (CSS columns)

Masonry — where cards of varying heights pack together like bricks — is one of the most-requested layouts. The CSS columns property handles it natively without JS:

만들어줘: 핀터레스트 스타일 masonry 그리드.
CSS columns: 3 을 사용해서.
카드마다 높이가 다르게 — 60px, 100px, 80px, 120px, 70px 패딩으로 변화 줘.
카드: 밝은 배경, 1px 테두리, border-radius 8px.
column-gap 12px, margin-bottom 12px between cards.

The key insight: break-inside: avoid on each card prevents a card from splitting across columns.

Magazine / editorial layout

For complex editorial grids, describe the feature item first, then the supporting items:

뉴스 사이트 레이아웃:
- 큰 Featured 기사: 왼쪽 2열, 2행 차지
- Story 기사 2개: 오른쪽에 세로로 쌓기
- 아래에 3개 기사 가로로 나란히
CSS Grid, gap 12px, 모든 카드 어두운 배경 (#111), 흰 텍스트.

Holy Grail layout

The classic header + sidebar + main + aside + footer pattern is a single prompt away:

Holy Grail 레이아웃:
- Header: 전체 너비
- 왼쪽 사이드바: 200px 고정
- 메인 콘텐츠: 1fr (남은 공간)
- 오른쪽 aside: 180px 고정
- Footer: 전체 너비
CSS Grid, grid-template-areas 사용.

Key prompting insight

Describe layouts by their visual rhythm and hierarchy: what’s big, what’s small, what’s side-by-side, what stacks. The CSS Grid template columns and template areas are implementation details the AI should figure out from your description.

The demo shows all three layout patterns — magazine, masonry, and holy grail — each with the key CSS snippet that was generated from the prompt.