В CSS Grid есть несколько способов позиционирования элементов вне зависимости от ширины строки.
1. Использование свойства grid-auto-flow: column;
Это свойство определяет, как элементы будут размещаться в сетке. Значение "column" указывает, что элементы будут размещаться один под другим в столбце, даже если ширина строки достаточно вместить все элементы.
Пример:
.grid-container {
display: grid;
grid-auto-flow: column;
}
2. Использование свойства grid-template-rows с единицей размера, которая не зависит от ширины строки.
Чтобы элементы были размещены один под другим, независимо от ширины строки, можно указать одно значение для свойства grid-template-rows, которое будет не изменяться при изменении размеров строки.
Пример:
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content;
}
3. Использование свойства grid-auto-rows с единицей размера, которая не зависит от ширины строки.
Свойство grid-auto-rows определяет высоту строк, которые создаются автоматически. Если задать значение min-content, то высота каждой строки будет соответствовать контенту в ней.
Пример:
.grid-container {
display: grid;
grid-auto-rows: min-content;
}
Выбор метода зависит от требований к размещению элементов и структуры сетки. Вы можете выбрать любой из этих методов или комбинировать их, чтобы добиться необходимого результата.