CSS ග්රිඩ් ගුණාංගවල කෙටි අංකනය
grid ගුණාංගය
ග්රිඩ් කන්ටේනරයේ සියලුම තීරු සහ
පේළි ගුණාංගවල අංකනය කෙටි කිරීමකි. සියලු
අගයන් එක් පේළියක අපොහොසත් ලකුණක් ඔස්සේ ලියා ඇත.
grid භාවිතයෙන් එක් පේළියක විස්තර කළ හැක්කේ
එක් වර්ගයක ගුණාංග පමණක් -
පැහැදිලි (grid-template-rows,
grid-template-columns,
grid-template-areas)
හෝ අපැහැදිලි (grid-auto-rows,
grid-auto-columns,
grid-auto-flow).
සඳහන් නොකළ එම ගුණාංග,
පෙරනිමි අගයන් ලබා ගනී.
උදාහරණය
අපි වගුවක් සාදමු
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: 600px;
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: 600px;
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: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ප්රායෝගික කාර්යයන්
පහත උදාහරණය ක්රියාත්මක කරන්න:
පහත උදාහරණය ක්රියාත්මක කරන්න:
පහත උදාහරණය ක්රියාත්මක කරන්න:
