Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Kontainer dan grid

Menentukan kolom tempat isi halaman berada, supaya baris teks tidak melar sampai ujung layar lebar.

Tata letak

Pratinjau langsung

Sumber

<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; }
}

Cara memakainya

  • Jaga kontainer halaman di bawah 1120px; halaman yang hanya dibaca dipersempit sampai sekitar 680px
  • Jangan ubah jumlah kolom grid, ubah saja berapa kolom yang dipakai satu sel — 12 dibagi 8 dan 4
  • Kalau belum tahu berapa kartu yang akan muncul, biarkan mengalir otomatis daripada mengunci jumlah kolom

Hal yang perlu diwaspadai

  • Jangan nolkan padding samping — di layar sempit teks menempel ke tepi
  • Ambil jarak antar sel dari token spasi; angka yang beda-beda membuat blok terlihat tidak sejajar

Berikutnya