grid-auto-flow ගුණය
grid-auto-flow ගුණය
ග්රිඩ් එකක මූලද්රව්ය ස්වයංක්රීයව සකස් කිරීම නියම කරයි.
එයට අගයන් විය හැක්කේ row - පේළි මූලද්රව්ය වලින් පුරවයි,
column - තීරු,
dense - ජාලයේ හිස් තිබෙන සියලුම ස්ථාන වලට මූලද්රව්ය තබයි;
row dense - එක් එක් පේළිය සහ ජාලයේ ඇති සියලුම හිස් ස්ථාන පුරවමින් මූලද්රව්ය සකස් කරයි;
column dense -
එක් එක් තීරුව සහ ග්රිඩ් එකේ ඇති සියලුම හිස් තැන් මූලද්රව්ය වලින් පුරවයි.
වාක්ය රචනා ක්රමය
තේරුම් ගන්නා යන්ත්රය {
grid-auto-flow: ග්රිඩ් එකේ පුරවන කොටස;
}
උදාහරණය
වගුවේ සියලුම පේළි පුරවමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-auto-flow: row;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
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>
#parent {
display: grid;
grid-auto-flow: column;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
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>
#parent {
display: grid;
grid-auto-flow: dense;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
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>
#parent {
display: grid;
grid-auto-flow: row dense;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
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>
#parent {
display: grid;
grid-auto-flow: column dense;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
මෙයද බලන්න
-
gridගුණය,
තීරු සහ පේළි වල ගුණ සංක්ෂිප්තව ලිවීමට අවසර දෙයි -
grid-auto-rowsගුණය,
සඟවා ඇති ග්රිඩ් එකක පේළි ගණන සහ පළල නියම කරයි -
grid-template-columnsගුණය,
ග්රිඩ් එකක තීරු ගණන සහ පළල නියම කරයි -
grid-template-rowsගුණය,
ග්රිඩ් එකක පේළි ගණන සහ පළල නියම කරයි
