Design Atlas
한국어
▦ Layout

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.

Also known as: Thirds grid
···
html
<div class="frame">
  <div class="grid"></div>
  <div class="sun" id="sun"></div>
  <div class="ground"></div>
</div>
css
.frame{position:relative;width:min(92%,420px);aspect-ratio:3/2;overflow:hidden;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 30%,var(--bg)) 0%,color-mix(in oklab,var(--accent) 8%,var(--bg)) 62%)}
.ground{position:absolute;left:0;right:0;bottom:0;height:34%;background:color-mix(in oklab,var(--accent-3) 35%,var(--bg))}
.sun{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 30px color-mix(in oklab,var(--accent-2) 60%,transparent);
  left:33.33%;top:33.33%;transform:translate(-50%,-50%);
  animation:move 6s ease-in-out infinite}
.grid{position:absolute;inset:0}
.grid::before,.grid::after{content:'';position:absolute;background:rgba(255,255,255,.5)}
.grid::before{left:33.33%;top:0;bottom:0;width:1px;box-shadow:calc(33.33% - 1px) 0 0 rgba(255,255,255,.5)}
.grid::after{top:33.33%;left:0;right:0;height:1px;box-shadow:0 calc(33.33% - 1px) 0 rgba(255,255,255,.5)}
@keyframes move{
  0%,20%{left:33.33%;top:33.33%}
  50%,70%{left:66.66%;top:66.66%}
  100%{left:33.33%;top:33.33%}
}

Dead center feels stable but static and flat. Put the subject near a rule-of-thirds intersection (at roughly 1/3 or 2/3 of the width and height) instead, and the same photo suddenly has movement and the negative space reads as intentional.

It's exactly the grid overlay in camera apps and photo editors. On the web it guides where to position a person or logo inside a hero image, or where to crop a card thumbnail — in CSS that's object-position or background-position set near 33%/66%.

It's less a strict formula than a training tool for the instinct "avoid dead center." Plenty of shots actually work better with a golden spiral or a symmetric composition instead.