दुई स्तम्भ विभाजन
मुख्य सामग्री र सहायक जानकारीलाई छेउछाउ राख्ने, साँघुरो पर्दामा एक स्तम्भमा थुपार्नुपर्ने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<div class="dc-split">
<main class="dc-split__main">
<h2 class="dc-split__title">용접 보조 — 경기 화성</h2>
<p class="dc-split__text">주 5일, 오전 8시부터 오후 5시까지 일합니다. 기숙사와 점심이 나오고, 출입국 서류는 회사가 함께 준비합니다.</p>
<p class="dc-split__text">경력이 없어도 2주 교육을 받고 시작합니다. 교육 기간에도 일당이 나옵니다.</p>
</main>
<aside class="dc-split__side" aria-label="지원 요약">
<div class="dc-split__card">
<p class="dc-split__row"><span class="dc-split__k">월급</span><span class="dc-split__v">280만원</span></p>
<p class="dc-split__row"><span class="dc-split__k">비자</span><span class="dc-split__v">E-9</span></p>
<p class="dc-split__row"><span class="dc-split__k">마감</span><span class="dc-split__v">10월 2일</span></p>
<button type="button" class="dc-split__btn">지원하기</button>
</div>
</aside>
</div>.dc-split { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--dc-6); align-items:start; font-family:var(--dc-font); }
.dc-split--left { grid-template-columns:300px minmax(0,1fr); }
.dc-split--even { grid-template-columns:repeat(2, minmax(0,1fr)); }
.dc-split__main { min-width:0; }
.dc-split__side { min-width:0; }
.dc-split__title { margin:0 0 var(--dc-3); font-size:20px; font-weight:700; line-height:1.35; color:var(--dc-text); }
.dc-split__text { margin:0 0 var(--dc-3); font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-split__card { padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-split__row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--dc-3); margin:0 0 var(--dc-2); font-size:14px; }
.dc-split__k { color:var(--dc-text-mute); }
.dc-split__v { font-weight:700; color:var(--dc-text); }
.dc-split__btn { width:100%; min-height:44px; margin-top:var(--dc-3); border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:600; transition:background var(--dc-fast); }
.dc-split__btn:hover { background:var(--dc-brand-hi); }
@media (max-width:760px) {
.dc-split, .dc-split--left, .dc-split--even { grid-template-columns:minmax(0,1fr); gap:var(--dc-5); }
}कसरी प्रयोग गर्ने
- सहायक स्तम्भलाई निश्चित चौडाइ दिनु, मुख्य स्तम्भलाई बाँकी ठाउँ — पहिले मुख्य स्तम्भ खुम्चिनुपर्छ
- थुप्रिँदा पहिले पढिनुपर्ने स्तम्भलाई HTML मा पनि पहिले लेख्नु
- साँघुरो पर्दामा दुई स्तम्भ जबरजस्ती नराख्नु; ७६० पिक्सेल वरपर एक स्तम्भ बनाउनु
ध्यान दिनुपर्ने कुरा
- CSS को order ले दायाँ–बायाँ नसाट्नु — देखिने क्रम र ट्याबको क्रम फरक पर्छ
- मुख्य स्तम्भमा min-width:0 राख्नु, नत्र लामो तालिका वा कोडले लेआउट बिगार्छ