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

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

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

И здесь идет LESS-код: 
<pre><code>@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;
    ...
  }
}
</code></pre>
  • 24 января 2025 г. 8:04
Ответы на вопрос 2 
Чтобы задать фиксированный размер ячеек в CSS Grid и обеспечить наличие минимум трех ячеек в строке на всех устройствах, вы можете использовать фиксированные значения для колонок непосредственно в правилах `grid-template-columns`. Вместо использования `repeat(auto-fit, minmax(150px, 1fr))`, попробуйте задать специфические размеры колонок.

Вот пример, как можно изменить ваши стили в LESS:

```less
@border-radius: 8px;
@border-color: #cccccc;
@padding: 16px;
@image-height: 210px;
@font-size: 24px;
@item-width: 300px; // Ширина каждой ячейки, задайте по вашему усмотрению

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;

  // Задаем фиксированную ширину для ячеек и 3 колонки
  grid-template-columns: repeat(3, @item-width);
  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;
    ...
  }
}

// Добавьте медиазапрос для уменьшения ширины на мобильных устройствах
@media (max-width: @item-width * 3) { // Установите ширину вашего контейнера
  .grid-container {
    grid-template-columns: 1fr; // Строки по одному элементу
  }
}
```

### Объяснение:

1. **Фиксированная ширина ячеек**: Здесь задается фиксированная ширина для каждой ячейки (300px в примере). Вы можете изменить это значение на подходящее для вашего дизайна.

2. **Медиазапрос**: Для того чтобы сделать адаптивный дизайн, добавлен медиазапрос. Если ширина контейнера становится меньше, чем 900px (это 3 ячейки по 300px), вы можете сделать отдельные ячейки по одной в строке. На более широких экранах сетка будет оставаться с тремя ячейками в строке.

С этими изменениями ваша сетка должна быть более предсказуемой и поддерживать требуемое количество колонок на мобильных устройствах.
Может быть просто добавить фиксированно три колонки, коль скоро это минимальное количество? 
 
grid-template-columns: repeat(3, minmax(150px, 1fr)) repeat(auto-fit, minmax(150px, 1fr));
Похожие вопросы
    Показать ещё