достижение столбцов равной ширины в CSS Grid

При работе с сеткой CSS распределение элементов по сравнению с столбцами может быть оспаривающим. В то время как Flexbox предлагает простой подход, достижение того же результата с помощью CSS Grid требует немного большего рассмотрения.

исходный вопрос:

«Я хотел бы показать элементы подряд в столбцах равных видов. Работа. Как указано в ответе:

«1FR-это распределение доступного (!) Пространство. Это разрывается, как только содержимое становится больше, чем размер дорожки.» , чтобы убедиться, что столбцы сохраняют свою равную ширину, рекомендуется использовать minmax (0, 1FR). minmax (0, 1fr));

minmax (0, 1fr) разрешает сетку на третьем месте, до 0 и до 1FR. Это гарантирует, что столбцы поддерживают равную ширину. Однако этот подход может вызвать переполнение контента, если он превышает ширину столбца.

для визуальной демонстрации разницы между этими подходами, рассмотрите следующий пример:

grid-template-columns: repeat(3, minmax(0, 1fr));