CSS Grid Container

किसी Element को Grid Container में बदलना

किसी element पर display: grid set करना इसे एक grid container बना देता है, और हर direct child element automatically एक grid item बन जाता है -- children पर खुद कोई extra markup या classes की ज़रूरत नहीं। यही एकमात्र switch है जो उस container के लिए पूरे grid layout system को activate करता है।

उदाहरण: Turning an Element into a Grid Container

<style>
.container {
  display: grid;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Auto grid item</div>
  <div>Auto grid item</div>
</div>

Container/Item Relationship

Grid properties साफ़ तौर पर दो groups में बँटती हैं: container-level properties (grid-template-columns, gap, justify-items) जिन्हें आप parent पर एक बार set करते हैं, और item-level properties (grid-column, justify-self) जिन्हें आप individually children पर set करते हैं जब आपको default placement override करनी हो।

उदाहरण: The Container/Item Relationship

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  background: #eef;
  padding: 10px;
  gap: 8px;
}
.item {
  justify-self: start;
  background: seagreen;
  color: white;
  padding: 10px;
}
.container > div:not(.item) {
  background: mediumpurple;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">Item overrides placement</div>
  <div>Default item</div>
</div>

grid-template-columns से Columns Define करना

grid-template-columns left से right हर column के लिए एक size list करती है, इसलिए "200px 1fr 1fr" जैसी तीन values exactly उन widths के साथ तीन columns बनाती हैं। आप जितनी values देते हैं वही grid में columns की संख्या होगी।

उदाहरण: Defining Columns with grid-template-columns

<style>
.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>200px</div>
  <div>1fr</div>
  <div>1fr</div>
</div>

grid-template-rows से Rows Define करना

grid-template-rows बिल्कुल वैसे ही काम करती है लेकिन vertical axis के लिए, आपको specific row heights fix करने देती है इसके बजाय कि हर row अपने सबसे लंबे content के हिसाब से खुद automatically size हो।

उदाहरण: Defining Rows with grid-template-rows

<style>
.container {
  display: grid;
  grid-template-rows: 100px 100px;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Row 1</div>
  <div>Row 2</div>
</div>

Implicit बनाम Explicit Grids

grid-template-* से define की गई rows या columns explicit grid बनाती हैं; अगर आप उस grid में जगह से ज़्यादा items रखते हैं, तो CSS Grid चुपचाप overflow रखने के लिए extra implicit rows बना देता है, जो grid-auto-rows set करने पर उससे sized होती हैं।

grid-auto-flow control करता है कि वे implicit items कैसे pack होते हैं -- row (default) पहले rows भरता है, column पहले columns भरता है, और dense पहले वाले gaps को backfill करता है -- जबकि grid-auto-columns आपको implicit columns को उसी तरह size करने देता है जैसे grid-auto-rows implicit rows को करता है।

उदाहरण: Implicit vs Explicit Grids

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-auto-flow: row;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Explicit</div>
  <div>Explicit</div>
  <div>Implicit overflow row</div>
</div>