CSS Grid Tracks
In this page:
selector {
grid-template-columns: 1fr 2fr repeat(count, size);
grid-template-rows: size1 size2;
grid-auto-rows: size;
}Track में क्या Count होता है
किसी grid की हर row और हर column को track कहा जाता है। grid-template-columns और grid-template-rows हर एक track sizes की एक list define करते हैं, प्रति track एक entry, और CSS Grid items को उन tracks में layout करता है जो उसे मिलते हैं।
- Accepted values:
- length — 200px जैसा fixed size
- fr — free space का flexible fraction
- auto — content के अनुसार size होता है
- min-content | max-content — सबसे छोटा या सबसे बड़ा content size
- repeat(count, size) — repeated tracks
- minmax(min, max) — किसी track के लिए range
- auto-fill | auto-fit — जितने fit हों उतने tracks repeat करें
उदाहरण: What Counts as a Track
<style>
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px;
gap: 4px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
}
</style>
<div class="container">
<div>Track</div>
<div>Track</div>
</div>fr Unit
fr का मतलब है "fraction" और यह बची हुई free space को proportionally बाँटता है -- grid-template-columns: 1fr 2fr किसी भी fixed-size tracks के अपना हिस्सा लेने के बाद दूसरे column को पहले column की चौड़ाई का दोगुना देता है।
- Accepted values:
- 1fr — free space का एक हिस्सा
- 2fr — 1fr हिस्से का दोगुना
- minmax(0, 1fr) — content से overflow रोकता है
- auto — content के अनुसार size होता है
- नोट: fr सिर्फ track lists में इस्तेमाल किया जा सकता है
उदाहरण: The fr Unit
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1fr</div>
<div>2fr — twice as wide</div>
</div>Repetitive Patterns के लिए repeat()
repeat(4, 1fr) "1fr 1fr 1fr 1fr" type करने का shorthand है -- evenly-spaced multi-column layouts के लिए उपयोगी, और यह एक comma-separated pattern भी accept करता है, जैसे repeat(2, 100px 1fr) track sizes को alternate करने के लिए।
- Accepted values:
- repeat(3, 1fr) — तीन बराबर tracks
- repeat(auto-fill, minmax(200px, 1fr)) — जितने fit हो सकें
- repeat(auto-fit, minmax(200px, 1fr)) — fit होता है और खाली tracks collapse करता है
- repeat(2, 100px 200px) — एक pattern repeat करता है
उदाहरण: repeat() for Repetitive Patterns
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>Flexible-but-Bounded Tracks के लिए minmax()
minmax(150px, 1fr) किसी track को बताता है कि वह कभी 150px से नीचे shrink न हो लेकिन उससे आगे available space भरने के लिए grow हो -- यह किसी track के छोटे screens पर unreadably narrow हो जाने की समस्या solve करता है।
- Accepted values:
- minmax(100px, 1fr) — कम से कम 100px, space share करने के लिए grow करता है
- minmax(0, 1fr) — कुछ भी नहीं तक shrink हो सकता है
- minmax(auto, 300px) — 300px तक content-sized
- minmax(min-content, max-content) — content bounds
उदाहरण: minmax() for Flexible-but-Bounded Tracks
<style>
.container {
display: grid;
grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Never below 150px</div>
<div>Grows to fill space</div>
</div>auto-fill बनाम auto-fit
auto-fill और auto-fit दोनों browser को यह तय करने देते हैं कि कितने tracks fit होते हैं, लेकिन auto-fill खाली बची हुई tracks को visible रखता है (gaps छोड़ते हुए) जबकि auto-fit उन्हें zero width तक collapse कर देता है, असली tracks को row भरने के लिए stretch होने देते हुए।
अंतर सिर्फ तब दिखता है जब fit होने वाली tracks से items कम हों।
- Accepted values:
- auto-fill — जितने fit हों उतने tracks बनाता है, खाली वाली रखता है
- auto-fit — जितने fit हों, खाली वाली collapse करता है
- minmax(200px, 1fr) — आम track size
- repeat() — वह function जो इन्हें इस्तेमाल करता है
उदाहरण: auto-fill vs auto-fit
<style>
.fill {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
gap: 4px;
background: #eef;
padding: 10px;
margin-bottom: 10px;
}
.fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 4px;
background: #efe;
padding: 10px;
}
.fill div, .fit div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="fill"><div>Leaves gaps</div></div>
<div class="fit"><div>Stretches to fill</div></div>auto-fitऔरauto-fillको interchangeably इस्तेमाल करना, जबकिauto-fitखाली tracks को collapse करता है औरauto-fillउन्हें रखता है।1frइस्तेमाल करना और content के बहुत wide होने पर भी equal columns की उम्मीद करना, क्योंकिfrmin-content का सम्मान करता है;minmax(0, 1fr)इस्तेमाल करें।- बिना comma के
repeat(3 200px)लिखना, जो invalid है।
CSS Grid Chrome 57+, Firefox 52+, Safari 10.1+ और Edge 16+ में supported है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: