CSS ග්‍රිඩ් වල auto-fit වටිනාකම

දැන් අපි auto-fit වටිනාකම සලකා බලමු, එය ද repeat ශ්‍රිතය සමඟ එකට සමාන ප්‍රමාණයේ තීරු නියම කිරීමේදී යොදා ගනී. එය auto-fill වටිනාකමට වඩා වෙනස් වන්නේ, auto-fit තීරු ප්‍රමාණය කන්ටේනරයේ ලබා ගත හැකි පළලට ගැලපෙන ලෙස ඒවා පුළුල් හෝ සංකුචිත කරමින් සකසයි.

උදාහරණය

අපි auto-fit වටිනාකමේ ක්‍රියාකාරිත්වය අංග අටක් ඇති කන්ටේනරයක උදාහරණයෙන් බලමු. පෙර පාඩමෙන් ඔබට හුරුපුරුදු minmax ශ්‍රිතය auto-fit වටිනාකම සමඟ එකට යොදමු:

html<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>

css#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 දක්වා අඩු කරමු:

html<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>

css#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;
}

Результат:

ප්‍රායෝගික කාර්යයන්