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.

Also known as: Off-balance layout

···

html

<div class="comp" id="comp">
  <div class="b big"></div>
  <div class="b med"></div>
  <div class="b small"></div>
  <div class="b wide"></div>
</div>

css

.comp{position:relative;width:min(92%,460px);height:min(88%,260px)}
.b{position:absolute;border-radius:10px;transition:transform 1s cubic-bezier(.2,.8,.2,1);box-shadow:0 6px 18px rgba(0,0,0,.1)}
.big{width:46%;height:70%;left:4%;top:6%;background:var(--accent)}
.med{width:26%;height:38%;right:8%;top:10%;background:var(--accent-2)}
.small{width:16%;height:16%;right:30%;bottom:10%;background:var(--accent-3)}
.wide{width:34%;height:22%;left:8%;bottom:6%;background:var(--surface);border:1px solid var(--line)}
.comp.shift .big{transform:translate(3%,-2%) rotate(-1deg)}
.comp.shift .med{transform:translate(-4%,3%)}
.comp.shift .small{transform:translate(-6%,-4%) scale(1.1)}
.comp.shift .wide{transform:translate(4%,-3%)}

const comp = document.getElementById('comp');
setInterval(() => comp.classList.toggle('shift'), 1800);

A symmetric layout feels stable but reads as "seen it" quickly. Asymmetry deliberately mixes big and small elements, wide and narrow space, so the eye moves from one point to another — a technique long used in magazine editorial design.

You build it with uneven CSS Grid columns (grid-template-columns: 2fr 1fr 1.4fr, say) or by giving elements different grid-row/grid-column spans. The point isn't randomness but intentional imbalance — visual weight (size, color, contrast) still needs to sum to something balanced even while left-right symmetry is broken.

Overdo it and it just looks messy. Applying it locally — one hero section, one editorial block — rather than to a whole page fails less often.