Sobes.tech
Middle

Вазифаи амалӣ дар CSS Grid: контейнер дорои хусусияти grid-template-columns бо 5 сутуни доимӣ мебошад. Барои тағир додани шумораи сутунҳо ба динамикӣ (ҳосилшаванда) бояд ин хусусиятро нависӣ кардан лозим аст

sobes.tech AI

Ҷавоб аз AI

Чтобы сделать количество колонок в CSS Grid динамическим при фиксированной ширине колонок, можно использовать функцию repeat с ключевым словом auto-fit или auto-fill и фиксированной шириной колонок через minmax.

Пример:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

Здесь:

  • auto-fit автоматически подбирает количество колонок, которое помещается в контейнер.
  • minmax(150px, 1fr) задает минимальную ширину колонки 150px и максимальную — растягивается по доступному пространству.

Таким образом, количество колонок будет адаптироваться под ширину контейнера, сохраняя фиксированную минимальную ширину каждой колонки.