Я создаю аналитическую панель с карточками переменной высоты (например, текстовыми показателями или встроенными диаграммами). Использование автоматической подстройки CSS Grid для обеспечения отзывчивости работает на настольных компьютерах, но изменение размера приводит к неравномерным зазорам между высокими и короткими карточками, что приводит к смещению макета.
Ожидаемое и фактическое:
Ожидаемое: одинаковые промежутки в 1,5 rem; столбцы с выравниванием по верхнему краю при изменении размера.
Реально: пробелы увеличиваются до 3rem+ под высокими карточками шириной 1200 пикселей.
Конкретный вопрос:
Как обеспечить единообразие интервалов без JS? возможна ли подсетка для кроссбраузерности?
Grid Test
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
align-items: start; /* Attempted fix */
}
.card {
background: linear-gradient(white, #f9f9f9);
border: 1px solid #ddd;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (max-width: 1024px) {
.dashboard-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
Short Metric: 42%
Tall Chart: Data viz...
Medium Alert: Warning
Another Tall: List items...
```
Подробнее здесь: https://stackoverflow.com/questions/798 ... ing-tall-v
