column-gap ගුණය
column-gap ගුණය බහු තීරු පෙළෙහි තීරු අතර දුර,
සහ ග්රිඩ් එකක තීරු අතර දුර අර්ථ දක්වයි.
ගුණයේ අගය වන්නේ ඕනෑම ප්රමාණ සඳහා වන ඒකක හෝ මූලික වචනය normal
(පෙරනිමිය ලෙස), එහිදී බ්රවුසරය
තීරු අතර ප්රශස්ත දුර ස්වයංක්රීයව තෝරා ගනී.
වාක්ය ඛණ්ඩය
තෝරන්නා {
column-gap: අගය;
}
උදාහරණය
මෙම උදාහරණයේ තීරු ගණන
column-count
(3 ක්) සහ ඒවා අතර ඉඩ column-gap
50px ලෙස සඳහන් කර ඇත. තීරු වල පළල ස්වයංක්රීයව
මෙම කොන්දේසි සපුරාලන පරිදි (තීරු ගණන සහ ඒවා අතර දුර)
තෝරා ගනු ඇත:
<div id="elem">
some long text
</div>
#elem {
column-count: 3;
column-gap: 50px;
text-align: justify;
}
:
උදාහරණය . normal අගය
මෙම උදාහරණයේ තීරුවක පළල column-width
150px, ඒවායේ ගණන column-count
auto අගයකට සැකසා ඇති අතර ඒවා අතර ඉඩ
column-gap - normal අගයට සැකසා ඇත. මේ අනුව, බ්රවුසරය ස්වයංක්රීයව
අවශ්ය තීරු ගණන සහ
ඒවා අතර ඉඩ තෝරා ගනී (නමුත් ඒවායේ පළල වනු ඇත
150px):
<div id="elem">
some long text
</div>
#elem {
column-gap: normal;
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
උදාහරණය
ග්රිඩ් එකක තීරු අතර දුර අර්ථ දක්වමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#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;
}
:
උදාහරණය
දැන් අපි තීරු අතර දුර
% වලින් අර්ථ දක්වමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#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;
}
:
මේවාද බලන්න
-
column-widthගුණය,
තීරුවක පළල අර්ථ දක්වයි -
column-countගුණය,
තීරු ගණන අර්ථ දක්වයි -
gapගුණය,
ග්රිඩ් එකක අංග අතර දුර අර්ථ දක්වයි -
row-gapගුණය,
ග්රිඩ් එකක පේළි අතර දුර අර්ථ දක්වයි
