कन्टेनर र ग्रिड
पर्दा जति चौडा भए पनि वाक्य किनारासम्म नतानिने गरी सामग्री बस्ने खण्ड र स्तम्भ पहिले तय गर्ने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<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; }
}कसरी प्रयोग गर्ने
- मुख्य कन्टेनर ११२० पिक्सेलभित्र राख्नु; पढ्ने मात्र पृष्ठलाई ६८० पिक्सेलसम्म साँघुरो बनाउनु
- स्तम्भको सङ्ख्या नबदल्नु, एक खण्डले ओगट्ने स्तम्भ सङ्ख्या मात्र बदल्नु — १२ लाई ८ र ४ मा बाँड्ने गरी
- कति कार्ड आउँछन् थाहा नभएमा स्तम्भ नतोकी स्वतः मिलाउने ढाँचा प्रयोग गर्नु
ध्यान दिनुपर्ने कुरा
- दुवैतिरको मार्जिन शून्य नबनाउनु — साँघुरो पर्दामा अक्षर किनारामै टाँसिन्छ
- खण्डबीचको खाली ठाउँ स्पेसिङ टोकनबाट लिनु; फरक फरक मान राख्दा लाइन नमिलेको देखिन्छ