गैप गुण

gap गुण ग्रिड में तत्वों के बीच की दूरी निर्धारित करता है। मूल तत्व में गुण के मान में हम माप की इकाइयों के साथ आवश्यक दूरी निर्दिष्ट करते हैं - px, % आदि।

सिंटैक्स

cssसिलेक्टर {
  gap: दूरी;
}

उदाहरण

आइए ग्रिड में तत्वों के बीच की दूरी निर्धारित करें:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  grid-template-areas: 'third second first';
  border: 2px solid #696989;
  padding: 10px;
  gap: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}

Результат:

उदाहरण

और अब आइए ग्रिड में तत्वों के बीच की दूरी % में निर्धारित करें:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  grid-template-areas: 'third second first';
  border: 2px solid #696989;
  padding: 10px;
  gap: 2.5%;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}

Результат:

यह भी देखें