CSS Grid Gaps

Grid में Gaps, Margins से बेहतर क्यों हैं

grid items में margin जोड़ना पूरी grid को wider या taller बना देता है और container edges पर uneven spacing बनाता है; row-gap और column-gap इसके बजाय सिर्फ tracks के बीच space insert करते हैं, container edges को flush छोड़ते हुए।

उदाहरण: Why Gaps Beat Margins in a Grid

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Flush edges</div>
  <div>Even gaps</div>
  <div>No margin needed</div>
</div>

Horizontal Spacing के लिए column-gap

column-gap सिर्फ columns के बीच की space set करता है, rows के बीच vertical spacing को untouched छोड़ते हुए -- उपयोगी जब आपको tight vertical rhythm चाहिए लेकिन side-by-side columns के बीच breathing room।

उदाहरण: column-gap for Horizontal Spacing

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
  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>

Vertical Spacing के लिए row-gap

row-gap column-gap का vertical counterpart है, सिर्फ rows के बीच की space control करते हुए और columns के बीच horizontal spacing को पूरी तरह untouched छोड़ते हुए। इसे independently set करें जब आपके layout को generous vertical breathing room चाहिए लेकिन tight horizontal grouping, या इसका उल्टा।

उदाहरण: row-gap for Vertical Spacing

<style>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 30px;
  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>

gap Shorthand

gap: 20px 10px एक declaration में row-gap को 20px और column-gap को 10px set करता है, row value हमेशा पहले list की जाती है; अकेला gap: 16px दोनों axes पर एक साथ 16px लागू करता है।

shorthand आमतौर पर दोनों longhand properties से बेहतर माना जाता है जब तक आपको बाद में अपनी stylesheet में एक axis को independently बदलना न हो।

उदाहरण: The gap Shorthand

<style>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
  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>

Gaps minmax और fr Sizing के साथ Interact करते हैं

Gap space को fr और auto-fit/auto-fill calculations के काम करने वाली space में से घटाया जाता है, इसलिए किसी narrow container पर एक बड़ी gap value minmax() वाली tracks को आपकी उम्मीद से जल्दी wrap करा सकती है -- हमेशा gap और track sizing को साथ में test करें।

उदाहरण: Gaps Interact with minmax and fr Sizing

<style>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 16px;
}
</style>
<div class="container">
  <div>Large gap can push tracks to wrap sooner</div>
  <div>Card</div>
</div>