Интересные детали работы CSS Grid, о которых наверняка мало кто задумывался -
1fr, 50% и auto это одно и то же? В статье разбирается специфика и плюсы/минусы каждого из этих подходов. Если кратко:50% 50% — колонки строго фиксируются по ширине, но при наличии gap общий размер сетки может превысить 100% ширины контейнера, вызывая горизонтальный скролл.auto auto — ширина колонок определяется содержимым. Если в одной из колонок больше текста или изображение, она становится шире другой.1fr 1fr — колонки делят доступное пространство поровну, игнорируя gap. Это самый предсказуемый и часто используемый вариант.В случае с изображением, превышающим ширину колонки,
50% приводит к переполнению, auto может расшириться неожиданным образом, а 1fr корректно выделяет пространство, если ограничить изображение с помощью max-width: 100%.Для предотвращения "выпирания" колонок из-за длинного контента (например, URL без переноса) рекомендуется использовать
minmax(0, 1fr).Также рассматриваются смешанные значения, например 20% 1fr, и дополнительные ключевые слова (
min-content, max-content, fit-content()), позволяющие гибко управлять шириной колонок.Статья - https://frontendmasters.com/blog/1fr-1fr-vs-auto-auto-vs-50-50/