CSS හි ව්යංග ග්රිඩ්
ව්යංග ග්රිඩ් එකක් නිර්මාණය වන්නේ බ්රවුසරය විසින් ස්වයංක්රීයව, මූලද්රව්ය ගණන පැහැදිලි ජාලකයට ගැලපෙන්නේ නැති විටය. එය සිදු වන්නේ කෙසේදැයි අපි බලමු.
අපට බ්ලොක් හතරක් ඇතැයි සිතමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
අපගේ ජාලකයේ ප්රමාණය
3 හි 3 ක් යැයි සිතමු:
#parent {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
අපගේ බ්ලොක් තුන ජාලකය ඔස්සේ ස්ථානගත කරමු:
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
හතරවන බ්ලොක් එක හතරවන පේළියේදී සහ තීරුවේදී ස්ථානගත කරමු:
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
අපගේ ජාලකයේ ප්රමාණය
3 හි 3 වන බැවින්,
හතරවන පේළියක් හෝ තීරුවක් මෙම
ජාලකය තුළ තිබෙන්නේ නැත. එහෙත්, ඒවා පැහැදිලි ආකාරයෙන් තිබෙන්නේ නැත,
එනම් අප විසින් නියම කරන ලද ආකාරයෙන් නොවේ. නමුත් බ්රවුසරය
ඒවා ව්යංග ලෙස, එනම් තනියම, නිර්මාණය කරයි.
මෙහිදී, අපි ප්රමාණ දක්වා ඇත්තේ පැහැදිලි ජාලකය සඳහා පමණක් බැවින්, මෙම ජාලකයෙන් පිටත සෛල සඳහා ප්රමාණ බ්රවුසරය විසින් ගණනය කරනු ලැබේ. එනම් අපගේ අවස්ථාවේ දී, හතරවන බ්ලොක් එකේ ප්රමාණ බ්රවුසරය විසින් ස්වයංක්රීයව නියම කරනු ලැබේ.
අපට ලැබෙන දේ අපි බලමු:
<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: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
:
ඔබගේ ජාලකයේ බ්ලොක් 6 ක් ඇතැයි සිතමු.
බ්ලොක් 3 ක් පැහැදිලි ජාලකය තුළ,
බ්ලොක් තුනක් ව්යංග ජාලකය තුළ ස්ථානගත කරන්න.
