CSS RWD Grid View
In this page:
* {
box-sizing: border-box;
}
.column {
width: percentage;
float: left;
}Responsive Grid View क्या है
एक responsive grid view content को fluid columns की एक निश्चित संख्या में arrange करता है जो viewport बदलने पर reflow होते हैं -- stack, wrap, या resize होते हुए -- एक rigid pixel grid के बजाय जो screen size चाहे जो भी हो एक जैसी width बनाए रखता है।
उदाहरण: What a Responsive Grid View Is
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.row div {
background: steelblue;
color: white;
padding: 10px;
margin: 4px;
}
</style>
<div class="row">
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>Percentage Based Columns
Classic approach float या inline-block इस्तेमाल करके किसी row को percentage-width columns में बाँटता है (जैसे तीन columns हर एक 33.33% पर), इसलिए container के shrink होने पर columns automatically साथ में shrink होते हैं, हालांकि उन्हें फिर भी बहुत छोटे screens पर stack होने के लिए एक breakpoint चाहिए होता है।
- Accepted values:
- width: 25% — चार columns
- width: 33.33% — तीन columns
- width: 50% — दो columns
- width: 100% — एक column
- box-sizing: border-box — padding को width के अंदर रखता है
उदाहरण: Percentage Based Columns
<style>
.row {
overflow: hidden;
}
.col {
float: left;
width: 33.33%;
box-sizing: border-box;
padding: 10px;
color: white;
}
.col:nth-child(1) { background: coral; }
.col:nth-child(2) { background: seagreen; }
.col:nth-child(3) { background: steelblue; }
</style>
<div class="row">
<div class="col">33.33%</div>
<div class="col">33.33%</div>
<div class="col">33.33%</div>
</div>Flexbox Based Grid View
flex-wrap: wrap वाला एक flex container और items को दिया गया एक flex-basis percentage या fixed minimum width एक self-adjusting grid produce करता है जहाँ columns fit न होने पर automatically नई rows में wrap हो जाते हैं, बिना किसी explicit breakpoint math के।
- Accepted values:
- display: flex — एक row बनाता है
- flex-wrap: wrap — wrapping की अनुमति देता है
- flex: 1 1 <basis> — flexible columns
- gap: <length> — gutters
उदाहरण: Flexbox Based Grid View
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex-basis: 200px;
background: steelblue;
color: white;
padding: 10px;
margin: 4px;
}
</style>
<div class="row">
<div class="col">Wraps automatically</div>
<div class="col" style="background: seagreen;">Wraps automatically</div>
</div>CSS Grid Based Grid View
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) एक grid view बनाता है जो row में जितने भी 200px-minimum columns fit हो सकें उतने रखता है और बची हुई space भरने के लिए उन्हें evenly stretch करता है -- अक्सर बिल्कुल भी media queries की ज़रूरत नहीं पड़ती।
- Accepted values:
- display: grid — एक grid बनाता है
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) — responsive columns
- gap: <length> — gutters
- grid-column: span <n> — column spans
उदाहरण: CSS Grid Based Grid View
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
.grid div {
background: steelblue;
color: white;
padding: 12px;
}
</style>
<div class="grid">
<div>Card</div>
<div style="background: seagreen;">Card</div>
</div>Approaches के बीच चुनना
Percentage floats अब काफ़ी हद तक legacy हैं; flexbox card grids और toolbars जैसे single-row या single-column flows के लिए उपयुक्त है, जबकि CSS Grid genuinely two-dimensional layouts (rows AND columns दोनों को explicit control चाहिए) के लिए उपयुक्त है जैसे कोई पूरा page shell या dashboard।
उदाहरण: Choosing Between the Approaches
<style>
.cards {
display: flex;
flex-wrap: wrap;
}
.cards div {
background: steelblue;
color: white;
padding: 10px;
margin: 4px;
}
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.dashboard div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="cards">
<div>Card row: Flexbox</div>
</div>
<div class="dashboard">
<div>Two-dimensional shell: Grid</div>
</div>- padding और border शामिल होने के बाद 100% से ज़्यादा जुड़ने वाली widths इस्तेमाल करना, जिससे columns wrap हो जाते हैं;
box-sizing: border-boxइस्तेमाल करें। - किसी float based grid में floats clear करना भूल जाना, जिससे parent collapse हो जाता है।
- percentages या
frunits के बजाय fixed pixel column widths इस्तेमाल करना।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: