CSS ग्रिड में कॉलम और पंक्तियों के बीच की दूरी

gap गुण का उपयोग करके ग्रिड के कॉलम और पंक्तियों के बीच की दूरी एक साथ निर्धारित की जा सकती है।

या तो एक मान दिया जा सकता है, या फिर दो मान स्पेस से अलग किए जा सकते हैं। यदि एक मान दिया गया है, तो यह एक साथ कॉलम और पंक्तियों के बीच की दूरी निर्धारित करता है। यदि दो मान दिए गए हैं, तो पहला मान पंक्तियों के बीच की दूरी निर्धारित करता है, और दूसरा - कॉलम के बीच की दूरी।

उदाहरण

आइए कॉलम और पंक्तियों के बीच समान दूरी निर्धारित करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  gap: 10px;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  padding: 10px;
  border: 2px solid #696989;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

आइए कॉलम और पंक्तियों के बीच अलग-अलग दूरी निर्धारित करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  gap: 20px 10px;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  padding: 10px;
  border: 2px solid #696989;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

व्यावहारिक कार्य