Design Atlas
한국어
✎ Graphic, brand & print

Grid system (print)

인쇄용 그리드 시스템

A grid of regular modules that print layouts like posters and brochures snap their text and images to, so the composition stays consistent even as the content changes.

Also known as: Modular gridPrint grid
···
html
<div class="poster">
  <div class="grid"></div>
  <div class="blk b1"></div>
  <div class="blk b2"></div>
  <div class="blk b3"></div>
  <div class="blk b4"></div>
</div>
css
.poster{--u:16.6667%;position:relative;width:min(44%,140px);aspect-ratio:3/4;background:var(--surface);border:1px solid var(--line)}
.grid{position:absolute;inset:0;opacity:.45;
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px var(--u)),
    repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--u))}
.blk{position:absolute;opacity:0;transform:scale(.88);animation:pop 4.8s ease infinite}
.b1{left:0;top:0;width:calc(var(--u) * 6);height:calc(var(--u) * 2);background:var(--fg)}
.b2{left:0;top:calc(var(--u) * 2.4);width:calc(var(--u) * 4);height:calc(var(--u) * .8);background:var(--accent);animation-delay:.3s}
.b3{left:0;top:calc(var(--u) * 3.6);width:calc(var(--u) * 3.5);height:calc(var(--u) * 2.2);background:var(--muted);animation-delay:.6s}
.b4{left:calc(var(--u) * 4);top:calc(var(--u) * 3.6);width:calc(var(--u) * 2);height:calc(var(--u) * 2.2);background:var(--accent-2);animation-delay:.9s}
@keyframes pop{0%,6%{opacity:0;transform:scale(.85)}16%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.85)}}

A print grid system divides a poster or brochure's page into regular modules, and every photo and text block snaps to those cells. Because the underlying grid stays fixed even when the content changes issue to issue, a different designer can produce the next edition and it still reads as the same series.

The method was formalized in Swiss (International) Typographic Style: the page is divided evenly in both directions, with the margins and the gap between cells (the gutter) fixed alongside the columns themselves. Placing an element means declaring how many cells it spans — never eyeballing a position.

The grid itself is invisible in the finished print piece, but the way photo sizes and margins quietly repeat across many pages and campaigns is exactly what reads as "the same brand made this." The 12-column grid used in digital products is this same idea carried over to the screen.

When to use

Use it for poster series, brochures and magazine layouts that need photo and text placement to stay consistent across many editions or pages.