Kazi ya minmax katika Gridi za CSS

Ni rahisi sana kutumia pamoja na auto-fill kubainisha kazi minmax, ambayo huweka anuwai ya upana wa safu wima kutoka kwa thamani ya chini hadi ya juu. Ikiwa upana wa chombo hautoshi kwa wote safu wima, basi baadhi yao zitahamia kwenye mstari mpya, huku safu wima katika mstari zikigawanywa kwa usawa ndani yake.

Tuangalie kwa mfano. Ili kuweza kuona chaguzi tofauti za kupangia safu wima badilisha upana wa ukurasa:

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-fill, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: