Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Container & grid

Decides the column your content lives in, so lines of text never stretch edge to edge on a wide monitor.

Layout

Live preview

Source

<div class="dc-wrap">
  <p class="dc-wrap__note">컨테이너 — 최대 너비 1120px, 양옆 여백 24px</p>
  <div class="dc-grid">
    <div class="dc-grid__cell dc-grid__cell--12">머리말 · 12열</div>
    <div class="dc-grid__cell dc-grid__cell--8">본문 · 8열</div>
    <div class="dc-grid__cell dc-grid__cell--4">곁가지 · 4열</div>
    <div class="dc-grid__cell dc-grid__cell--4">카드 · 4열</div>
    <div class="dc-grid__cell dc-grid__cell--4">카드 · 4열</div>
    <div class="dc-grid__cell dc-grid__cell--4">카드 · 4열</div>
  </div>
</div>
.dc-wrap { width:100%; max-width:1120px; margin-inline:auto; padding-inline:var(--dc-6); font-family:var(--dc-font); }
.dc-wrap--narrow { max-width:680px; }
.dc-wrap__note { margin:0 0 var(--dc-3); font-size:12px; color:var(--dc-text-mute); }
.dc-wrap__text { margin:0 0 var(--dc-3); font-size:15px; line-height:1.7; color:var(--dc-text-sub); }
.dc-grid { display:grid; margin:0; padding:0; list-style:none; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--dc-4); }
.dc-grid--auto { grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.dc-grid__cell { display:flex; align-items:center; justify-content:center; min-height:64px; padding:var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-sunken); font-size:13px; color:var(--dc-text-sub); text-align:center; }
.dc-grid__cell--12 { grid-column:span 12; }
.dc-grid__cell--8 { grid-column:span 8; }
.dc-grid__cell--4 { grid-column:span 4; }
@media (max-width:700px) {
  .dc-wrap { padding-inline:var(--dc-4); }
  .dc-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .dc-grid--auto { grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
  .dc-grid__cell--12, .dc-grid__cell--8 { grid-column:span 4; }
  .dc-grid__cell--4 { grid-column:span 2; }
}

How to use it

  • Keep the page container at or under 1120px; narrow it to about 680px for read-only pages
  • Leave the column count alone and change how many columns a cell spans — split 12 into 8 and 4
  • When you don't know how many cards will arrive, let them flow with auto-fit instead of fixing the count

Watch out for

  • Never drop the side padding to zero — on a narrow screen the text touches the edge of the display
  • Set the gap from the spacing tokens; ad-hoc values make neighbouring sections look misaligned

Next