1

Пытаюсь решить такую задачу: Есть два идентичных объекта Grid CSS, в которых в строчку располагаются разное количество элементов, в одном 5 во втором 2. Нужно, чтобы совпали отступы.

Во втором объекте применил ширину единицами fr, что по логике должно разбить на такое же количество столбцов, что и первый объект, однако отступы между элементами не совпадают с первым объектом.

.tabs-grid {
    grid-template-columns: repeat(5, minmax(20px, 100%));
}
.tabs-grid--two-tabs {
    grid-template-columns: minmax(160px, 2fr) minmax(160px, 3fr);
}

Вот пример: https://codepen.io/2seem/pen/QWWmbma

1
  • Я так понимаю проблема в том, как высчитывается единица измерения fr. Ожидается, что 3fr эквивалентно 1fr + gap + 1fr + gap + 1fr, и тогда отступы у первого и второго объекта совпали бы. 7 ноя 2019 в 19:40

1 ответ 1

0

grid-column-gap: 20px; - Определяет отступ между колонками.

1
  • Это да, и размер отступов совпадает у обоих объектов, свойства полностью идентичны. Однако у второго объекта отступ между внутренними элементами сдвинут относительно первого объекта. 7 ноя 2019 в 19:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.