CSS Grid Items

Grid line numbers grid के top और left edges के साथ 1 से शुरू होते हैं, और इस topic की हर property किसी item को उन lines को सीधे reference करके place करती है।

In this page:

Grid Line Numbers
grid-column: start / end
grid-row: start / end
span Keyword से Spanning करना
चारों Lines के लिए grid-area Shorthand

Syntax

css

item {
  grid-column: start / end;
  grid-row: start / end;
}

Grid Line Numbers

3 columns वाली एक grid में 4 vertical grid lines होती हैं (1 से 4 तक numbered), और 2 rows वाली grid में 3 horizontal lines होती हैं -- grid-column और grid-row किसी item को यह बताकर place करते हैं कि वह किन lines के बीच शुरू और खत्म होता है।

Note:

Accepted values:
grid-column — start line / end line, जैसे 1 / 3
grid-row — start line / end line
span n — कई tracks span करता है, जैसे span 2
1 — explicit grid की आख़िरी line
grid-area — row-start / column-start / row-end / column-end, या एक area name
auto — automatic placement

उदाहरण: Grid Line Numbers

css

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: #eee;
}
.container div {
  background: #ddd;
  padding: 8px;
}
.item {
  grid-column: 1 / 2;
  background: steelblue;
  color: white;
}
</style>
<div class="container">
  <div class="item">Between lines 1 and 2</div>
</div>

grid-column: start / end

grid-column: 1 / 3 किसी item को column line 1 से शुरू करके column line 3 पर खत्म करता है, यानी यह उन lines के बीच पहले दो column tracks में फैलता है। दोनों start और end lines को explicitly नाम देना grid चाहे जैसे भी structured हो precise, predictable placement देता है।

अंदर से, grid-column दो longhand properties grid-column-start और grid-column-end का shorthand है, जिन्हें आप independently भी set कर सकते हैं जब किसी item के सिर्फ एक edge को move करना हो।

Note:

Accepted values:
grid-column: 1 / 3 — line 1 से line 3 तक
grid-column: 2 / span 2 — 2 पर शुरू, दो span
grid-column: 1 / -1 — पूरी width
grid-column: auto — default
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: grid-column: start / end

css

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: #eee;
}
.container div {
  background: #ddd;
  padding: 8px;
}
.item {
  grid-column: 1 / 3;
  background: steelblue;
  color: white;
}
</style>
<div class="container">
  <div class="item">Spans the first two tracks</div>
</div>

grid-row: start / end

grid-row बिल्कुल grid-column जैसा काम करता है लेकिन vertical axis के लिए -- grid-row: 2 / 4 किसी item को row tracks 2 और 3 में फैलाता है, row line 4 पर रुकते हुए। एक explicit grid-row को एक explicit grid-column के साथ combine करना किसी item को grid में कहीं भी एक exact rectangular block पर pin कर देता है।

grid-column की तरह ही, grid-row grid-row-start और grid-row-end का shorthand है, जो independently set करने में उपयोगी हैं जब किसी item के दूसरे edge को disturb किए बिना सिर्फ एक edge को reposition करना हो।

Note:

Accepted values:
grid-row: 1 / 3 — line 1 से line 3 तक
grid-row: 2 / span 2 — 2 पर शुरू, दो span
grid-row: 1 / -1 — पूरी height
grid-row: auto — default
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: grid-row: start / end

css

<style>
.container {
  display: grid;
  grid-template-rows: 60px 60px 60px;
  gap: 4px;
  background: #eee;
}
.container div {
  background: #ddd;
}
.item {
  grid-row: 2 / 4;
  background: steelblue;
  color: white;
}
</style>
<div class="container">
  <div class="item">Spans rows 2 and 3</div>
</div>

span Keyword से Spanning करना

दोनों lines नाम देने के बजाय, grid-column: span 2 किसी item को यह बताता है कि वह जहाँ भी normally placed होता वहाँ से 2 columns span करे -- content order बदलने पर exact line numbers hardcode करने से यह ज़्यादा flexible है।

Note:

Accepted values:
span <n> — n tracks span करता है
grid-column: span 2 — दो columns wide
grid-row: span 3 — तीन rows tall
grid-column: 1 / span 2 — line 1 से शुरू होता है

उदाहरण: Spanning with the span Keyword

css

<style>
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #eee;
}
.item {
  grid-column: span 2;
  background: steelblue;
  color: white;
  padding: 8px;
}
</style>
<div class="container">
  <div class="item">Spans 2 columns from wherever it lands</div>
</div>

चारों Lines के लिए grid-area Shorthand

grid-area: 1 / 1 / 3 / 3 एक declaration में row-start, column-start, row-end, column-end set करता है (उसी order में), किसी item को top-left corner से शुरू होने वाले एक 2x2 block में place करते हुए।

Note:

Accepted values:
grid-area: <row-start> / <col-start> / <row-end> / <col-end> — चार lines
grid-area: <name> — किसी named area में place करता है
grid-area: span 2 / span 3 — सिर्फ spans
auto — default
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: grid-area Shorthand for All Four Lines

css

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #eee;
}
.item {
  grid-area: 1 / 1 / 3 / 3;
  background: steelblue;
  color: white;
  padding: 8px;
}
</style>
<div class="container">
  <div class="item">2x2 block from the top-left corner</div>
</div>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Grid Align Next Lesson → CSS Grid Named Areas

CSS Grid Items

Grid Line Numbers

grid-column: start / end

grid-row: start / end

span Keyword से Spanning करना

चारों Lines के लिए grid-area Shorthand

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code