गुण column-gap

गुण column-gap मल्टी-कॉलम टेक्स्ट में कॉलम के बीच की दूरी, साथ ही ग्रिड में कॉलम के बीच की दूरी निर्धारित करता है। गुण का मान कोई भी आकारों के लिए इकाई या कीवर्ड normal (डिफ़ॉल्ट रूप से) हो सकता है, जिसमें ब्राउज़र स्वयं कॉलम के बीच इष्टतम दूरी निर्धारित करता है।

सिंटैक्स

cssसेलेक्टर {
  column-gap: मान;
}

उदाहरण

इस उदाहरण में कॉलम की संख्या column-count (3 टुकड़े) और उनके बीच का अंतराल column-gap 50px में निर्दिष्ट किया गया है। और कॉलम की चौड़ाई स्वचालित रूप से इस प्रकार समायोजित होगी कि ये शर्तें पूरी हों (कॉलम की संख्या और उनके बीच की दूरी):

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

उदाहरण . मान normal

इस उदाहरण में कॉलम की चौड़ाई column-width 150px में निर्दिष्ट है, उनकी संख्या column-count auto मान में है, और अंतराल column-gap उनके बीच - normal मान में है। इस प्रकार, ब्राउज़र स्वयं आवश्यक संख्या में कॉलम और उनके बीच का अंतराल निर्धारित करेगा (लेकिन उनकी चौड़ाई 150px होगी):

html<div id="elem">
  some long text
</div>

css#elem {
  column-gap: normal;
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

उदाहरण

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

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

css#parent {
  display: grid;
  column-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

उदाहरण

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

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

css#parent {
  display: grid;
  column-gap: 5%;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

यह भी देखें