CSS ග්රිඩ් වල auto-fit වටිනාකම
දැන් අපි auto-fit වටිනාකම සලකා බලමු,
එය ද repeat ශ්රිතය සමඟ එකට
සමාන ප්රමාණයේ තීරු නියම කිරීමේදී යොදා ගනී.
එය auto-fill වටිනාකමට වඩා වෙනස් වන්නේ,
auto-fit තීරු ප්රමාණය
කන්ටේනරයේ ලබා ගත හැකි පළලට ගැලපෙන ලෙස ඒවා පුළුල් හෝ
සංකුචිත කරමින් සකසයි.
උදාහරණය
අපි auto-fit වටිනාකමේ ක්රියාකාරිත්වය
අංග අටක් ඇති කන්ටේනරයක උදාහරණයෙන් බලමු. පෙර පාඩමෙන් ඔබට හුරුපුරුදු
minmax ශ්රිතය auto-fit වටිනාකම සමඟ
එකට යොදමු:
<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>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
උදාහරණය
දැන් අපි ග්රිඩ් කන්ටේනරයේ පළල
400px දක්වා අඩු කරමු:
<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>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ප්රායෝගික කාර්යයන්
අංක නවයක් ඇති වගුවක් ඔබට ඇතැයි සිතමු.
auto-fit වටිනාකම භාවිතයෙන් ඒවාට
තීරු පළල සහ ග්රිඩ් කන්ටේනරයේ පළල එසේ සකසන්න,
සියලු දරු අංග පේළි තුනක තැබේ.
දැන් පෙර කාර්යය වෙනස් කරන්න, සියලුම අංග පේළි දෙකක තැබේ.
