grid-column ගුණය
grid-column ගුණය විසින්
grid හෝ සැකිල්ලක තීරු ඔස්සේ අංගයක
ආරම්භක සහ අවසන් ස්ථානය නියම කරයි. ගුණයේ අගයන් විය හැක්කේ
ධන හෝ ඍණ සංඛ්යා,
කොටස් අකුරින් වෙන් කර දක්වා ඇත. පළමු සංඛ්යාව විසින් දක්වන්නේ
අංගයේ ආරම්භක ස්ථානය, දෙවැන්න - අවසන් ස්ථානය.
අගයක් ලෙස අපි ධන සංඛ්යාවක් දෙනවා නම්, එවිට අංගයේ ස්ථානය ගණන් කරනු ලබන්නේ වමේ සිට දකුණට. ඍණ සංඛ්යාවක් දක්වන විට අංගය තබනු ලැබෙන්නේ ප්රතිලෝම අනුපිළිවෙලින්, එනම්, දකුණේ සිට වමට.
වාක්ය රචනය
තේරුම් ගන්නා {
grid-column: ආරම්භක ස්ථානය / අවසන් ස්ථානය;
}
උදාහරණය
අපි grid එකක ඇති අංගවලට ආරම්භක සහ අවසන් ස්ථානයන් දෙමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column: 1 / 2;
}
#elem2 {
grid-column: 1 / 3;
}
#elem3 {
grid-column: 1 / 4;
}
:
උදාහරණය
දැන් අපි grid-column ගුණයේ
ඍණ සංඛ්යා දක්වමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column: 1 / -2;
}
#elem2 {
grid-column: 1 / -3;
}
#elem3 {
grid-column: 1 / -4;
}
:
උදාහරණය
දැන් අපි කරමු, එවිට පළමු, දෙවන සහ තෙවන අංග පළමු පේළියේ පිහිටයි. සිව්වන අංගය සම්පූර්ණ දෙවන පේළිය ගනියි:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
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;
}
#elem4 {
grid-column: 1 / 4;
}
:
උදාහරණය
යාබද අංග විසින් අල්ලාගෙන සිටින තීරු අතිච්ඡාදනය වන විට, සෑම ඊළඟ අංගයක්ම පහළ පේළියකට මාරු වේ. අපි මෙම විශේෂ ගුණාංගය භාවිතා කරමු පළමු අංගය පළමු පේළියේ පිහිටන ආකාරයට, දෙවන අංගය - දෙවන පේළියේ, සහ තෙවන සහ සිව්වන අංග - තෙවන පේළියේ:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column: 1 / 4;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 1 / 2;
}
#elem4 {
grid-column: 3 / 4;
}
:
උදාහරණය
අපි grid-column ගුණය
සහ grid-row ගුණය එකට යොදමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 3;
}
#elem2 {
grid-row: 1 / 2;
}
#elem3 {
grid-row: 1 / 2;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
:
උදාහරණය
දැන් අපි කරමු, එවිට පළමු සහ පස්වන බ්ලොක් සම්පූර්ණ පේළිය ගනියි, දෙවන බ්ලොක් - පේළි දෙකක් සහ තීරු දෙකක්, සහ තෙවන සහ සිව්වන බ්ලොක් - එක් පේළියක් සහ තීරු දෙකක්:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 4;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
#elem4 {
grid-row: 3 / 3;
grid-column: 2 / 4;
}
#elem5 {
grid-row: 4 / 5;
grid-column: 1 / 4;
}
:
මෙයද බලන්න
-
grid-rowගුණය,
grid එකක පේළි ඔස්සේ අංගයක ආරම්භක සහ අවසන් ස්ථානය නියම කරන -
grid-column-startගුණය,
grid එකක තීරු ඔස්සේ අංගයක ආරම්භක ස්ථානය නියම කරන -
grid-column-endගුණය,
grid එකක තීරු ඔස්සේ අංගයක අවසන් ස්ථානය නියම කරන -
grid-template-columnsගුණය,
grid එකක තීරු ගණන සහ පළල නියම කරන -
grid-auto-columnsගුණය,
සඟවා ඇති grid එකක තීරු ගණන සහ පළල නියම කරන
