Арзиши auto-fit дар CSS grid

Акнун биёед арзиши auto-fit-ро баррасӣ кунем, ки инчунин вақте истифода мешавад, ки сутунҳои баробарандоза бо якдигар бо функсияи repeat муайян карда мешаванд. Фарқи он аз арзиши auto-fill дар он аст, ки auto-fit шумораи сутунҳоро ба паҳнои дастраси контейнер мутобиқ мекунад, васеъ карда ё фишурдаашон.

Намуна

Биёед кори арзиши auto-fit-ро дар намунаи контейнере бо ҳашт элемент баррасӣ кунем. Бо якҷоя бо арзиши auto-fit функсияи minmax-ро истифода барем, ки шумо аз дарси гузашта шинохтед:

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

Результат:

Намуна

Ва акнун паҳнои grid-контейнерро то 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;
}

Результат:

Вазифаҳои амалӣ