Как убрать автоматическое увеличение высоты ROW элемента в grid относительно другого row?

Чтобы убрать автоматическое увеличение высоты ряда (row) элемента в CSS Grid относительно другого ряда, вы можете использовать свойство grid-auto-rows.

По умолчанию, grid-auto-rows имеет значение auto, что позволяет элементу занимать столько места по вертикали, сколько ему требуется, чтобы содержимое поместилось. Однако, если вы хотите, чтобы высота ряда оставалась фиксированной, вне зависимости от содержимого, вы можете установить его значение на конкретную единицу измерения, например пиксели (px).

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-rows: 50px; /* Фиксированная высота для всех рядов */
}

.row {
  /* Стили для ряда */
}

В приведенном примере, мы установили grid-auto-rows на значение 50px, что означает, что каждый ряд будет иметь фиксированную высоту в 50 пикселей, независимо от его содержимого.

Если вы хотите, чтобы разные ряды имели разные фиксированные высоты, вы можете применить разные значения grid-auto-rows для каждого ряда.

.container {
  display: grid;
  grid-template-rows: 1fr;
}

.row {
  /* Стили для ряда */
}

.row1 {
  grid-auto-rows: 50px; /* Фиксированная высота для первого ряда */
}

.row2 {
  grid-auto-rows: 100px; /* Фиксированная высота для второго ряда */
}

Таким образом, вы можете установить фиксированную высоту для рядов элементов в CSS Grid, чтобы предотвратить их автоматическое увеличение относительно других рядов.