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;
}

Результат:

මේවාද බලන්න