grid ගුණය
grid ගුණය වන්නේ
ග්රිඩ් කන්ටේනරයේ සියලුම තීරු සහ
පේළි ගුණවල සංක්ෂිප්ත ආකාරයයි. සියලු
අගයන් එක් පේළියකින් කොටස් කිරීමේ සලකුණක් හරහා ලියනු ලැබේ.
grid මගින් එක් පේළියකින් විස්තර කළ හැක්කේ
ගුණ වර්ගයක් පමණි -
විධිමත් (grid-template-rows,
grid-template-columns,
grid-template-areas)
හෝ අවිධිමත් (grid-auto-rows,
grid-auto-columns,
grid-auto-flow).
සඳහන් නොකළ එම ගුණ
පෙරනිමි අගයන් ලබා ගනී.
වාක්ය රීතිය
මූලද්රව්යය {
grid: ජාලක ගුණ;
}
උදාහරණය
අපි grid ගුණය භාවිතයෙන් වගුවක්
සාදමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
උදාහරණය
දැන් අපි දෙවන සහ තෙවන පේළිවලට සමාන පළලක් දී, සෑම තීරුවකටම - විවිධ පළලක් දෙමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 60px 1fr 60px / 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
උදාහරණය
දැන් පෙර උදාහරණයේ වගුවේ ඉහළ පේළියේ පළල භාග දෙකක් කරමු, පළමු තීරුව - භාගයකින් අඩක් කරමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
මෙයද බලන්න
-
grid-templateගුණය,
මූලද්රව්යයක් සඳහා තීරු සහ පේළිවල ප්රමාණය හා පළල නියම කරයි -
grid-template-rowsගුණය,
ග්රිඩ් එකේ පේළිවල ප්රමාණය හා පළල නියම කරයි -
grid-template-columnsගුණය,
ග්රිඩ් එකේ තීරුවල ප්රමාණය හා පළල නියම කරයි -
grid-template-areasගුණය,
ග්රිඩ් එකේ මූලද්රව්ය අළෙවි කිරීම නියම කරයි -
grid-auto-flowගුණය,
ජාලකයේ මූලද්රව්ය ස්වයංක්රීයව අළෙවි කිරීම නියම කරයි
