Как сделать фиксироанный размер ячейки в css grid?

Question

[heartical]

Я пишу приложение на Angular, столкнулся с трудностью реализации CSS GRID.
Сетка адаптивно переносит контент. Но мне нужно, чтобы минимальное колличество ячеек в строке было 3 даже для мобильных устройств. Сейчас при переключении на мобильное устройство ячейки выстраиваются в 2 или 1 колонку. Мне нужно чтобы они ресайзились.

Вёрстка

<div class="container">
  <div *ngFor="let category of [1, 2, 3]" class="grid-container">
    <div class="category-header">
      <h2 class="category-title">Название категории</h2>
      <button size="m" appearance="outline-grayscale" tuiButton class="show-all-button">Показать все ({{ numberOfItems }})</button>
    </div>
    <div *ngFor="let item of [].constructor(numberOfItems); let i = index" class="grid-item"></div>
    <div class="show-more-button">
      <button size="m" appearance="outline-grayscale" tuiButton>Показать больше</button>
    </div>
  </div>
</div>

LESS

@border-radius: 8px;
@border-color: #cccccc;
@padding: 16px;
@image-height: 210px;
@font-size: 24px;


button {
  border-radius: @border-radius;
}

.container {
  max-width: 1200px;
  padding: 0;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  border-radius: @border-radius;
  box-sizing: border-box;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: auto;

  gap: @padding;

  .grid-item {
    aspect-ratio: 16 / 9;
    object-fit: cover;

    padding: @padding;
    text-align: center;
    border: 1px solid @border-color;
    border-radius: @border-radius;
    width: 100%;
    height: @image-height;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .category-header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @padding / 2;
  }

  .category-title {
    margin: 0;
    font-size: @font-size;
    font-weight: bold;
    text-align: left;
  }

  .show-all-button {
    margin-left: auto;
  }

  .show-more-button {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: @padding / 2;
  }
}

body {
  margin: 0;
  padding: 0;
}

То есть сетка адаптивна, но минимальное колличетсво ячеек в строке на сетке должно быть 3, а сами ячейки должны ресайзиться.

Comments

[Ankhena]

Используйте @media
Ну или функции min/max/clamp для размера ячейки.

Answer 1

[director-rentv]

Может быть просто добавить фиксированно три колонки, коль скоро это минимальное количество?

grid-template-columns: repeat(3, minmax(150px, 1fr)) repeat(auto-fit, minmax(150px, 1fr));

Comments

[heartical]

Мужиииик....
СПАСИБО БОЛЬШОЕ... ПИЗДЕЦ Я МУЧАЛСЯ БЫ ЕЩЁ 3 ДНЯ С ЭТОЙ ХУЙНЁЙ

[director-rentv]

Бывает :)