CSS හි ස්වයංසිද්ධ පළල් කොටස් සහිත ටයිල් බිම් සැකසුම
පෙර පාඩමේ දී, අපගේ ටයිල් බිම් සැකසුමේ දී, මූලද්රව්යවල පළල සහ ඒවායේ පරතරයන්ගේ එකතුව ප්රධාන මූලද්රව්යයේ පළලට සමාන විය යුතු විය. මෙය තරමක් සාමාන්යකරණය කර නැත. මූලද්රව්ය ස්වයංක්රීයව ප්රධාන මූලද්රව්යයේ පළලට අනුව සකස් වන පරිදි අපි සකස් කරමු.
අපට මෙවැනි ප්රධාන මූලද්රව්යයක් ඇතැයි උපකල්පනය කරමු:
.parent {
display: flex;
flex-wrap: wrap;
width: 800px;
margin: 50px auto;
border: 1px solid red;
}
මෙම ටයිල් බිම් සැකසුමේ මූලද්රව්ය පේළියකට 4
කොටස් ලෙස යොදමු යැයි උපකල්පනය කරමු:
.child {
box-sizing: border-box;
width: 200px;
height: 100px;
border: 1px solid green;
}
එක් එක් කොටස ප්රධාන මූලද්රව්යයේ කාර්තුවක් (හතරෙන් එකක්) අල්ලාගන්නා පරිදි
අපගේ කොටස්වල පළල සකසමු. මේ සඳහා ඒවායේ
ප්රමාණය 25% ලෙස සකසමු:
.child {
box-sizing: border-box;
width: 25%;
height: 100px;
border: 1px solid green;
}
කොටස්වල පළල ප්රතිශතයෙන් සකසන්න, එවිට ටයිල් බිම් සැකසුමේ පේළියකට කොටස් තුනක් ලැබේ.
කොටස්වල පළල ප්රතිශතයෙන් සකසන්න, එවිට ටයිල් බිම් සැකසුමේ පේළියකට කොටස් දෙකක් ලැබේ.
කොටස්වල පළල ප්රතිශතයෙන් සකසන්න, එවිට ටයිල් බිම් සැකසුමේ පේළියකට කොටස් එකක් ලැබේ.
