Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Khung chứa và lưới

Quyết định cột mà nội dung nằm trong, để dòng chữ không kéo dài hết màn hình rộng.

Bố cục

Xem trước trực tiếp

Nguồn

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

Cách dùng

  • Giữ khung chứa trong khoảng 1120px; trang chỉ để đọc thì thu về khoảng 680px
  • Đừng đổi số cột của lưới, chỉ đổi số cột mà một ô chiếm — chia 12 thành 8 và 4
  • Khi chưa biết sẽ có bao nhiêu thẻ, để chúng tự xếp theo auto-fit thay vì cố định số cột

Điểm cần lưu ý

  • Không để lề hai bên bằng 0 — trên màn hình hẹp chữ sẽ dính sát viền
  • Khoảng cách giữa các ô phải lấy từ token; mỗi nơi một số khác nhau sẽ làm các khối lệch nhau

Tiếp theo