Design Atlas
한국어
▦ Layout

Broken grid

브로큰 그리드

Set up an invisible grid, then deliberately let elements cross its lines — overlap, tilt, spill past the edge. An editorial layout technique.

Also known as: Grid-breaking layout
···
html
<div class="stage">
  <div class="ghost"></div>
  <div class="card c1"><i class="ln"></i><i class="ln s"></i></div>
  <div class="img"></div>
  <div class="card c2"><i class="ln"></i></div>
</div>
css
.stage{position:relative;width:min(90%,420px);height:min(88%,260px)}
.ghost{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:100%;gap:8px;opacity:.5}
.ghost::before,.ghost::after{content:'';border-left:1px dashed var(--line);height:100%}
.ghost::before{grid-column:2/2}
.ghost::after{grid-column:3/3}
.card{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:8%;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 16px rgba(0,0,0,.1);
  transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.c1{left:4%;top:8%;width:30%;height:34%}
.c2{left:44%;bottom:6%;width:26%;height:26%;z-index:2}
.img{position:absolute;right:6%;top:20%;width:36%;height:52%;border-radius:10px;z-index:1;
  background:linear-gradient(160deg,var(--accent-2),var(--accent));
  box-shadow:0 10px 26px rgba(0,0,0,.18);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.ln{display:block;height:6px;border-radius:3px;background:var(--line)}
.ln.s{width:60%}
.stage.tilt .img{transform:rotate(-4deg) translate(-4%,2%)}
.stage.tilt .c2{transform:translate(10%,-8%)}
.stage.tilt .c1{transform:rotate(1.5deg)}
js
document.querySelector('.stage').classList.add('x');
setInterval(() => document.querySelector('.stage').classList.toggle('tilt'), 1700);

The key isn't ignoring the grid — it's establishing one and then breaking it deliberately. Scatter elements with no grid at all and it just looks messy; keep everything else neatly aligned and let one element overlap or tilt slightly, and that one element reads as intentionally emphasized.

Build it by laying out the base with grid or flex, then giving the element you want to emphasize position: relative plus a negative margin (or transform: translate/rotate) so it crosses into a neighboring cell's territory. z-index controls stacking order, and a shadow on the overlapping piece sells the "floating above" effect.

Overuse makes a layout look broken by accident rather than by design, so it's best kept to one image or a couple of cards rather than an entire page.