Ровная сетка с отступами на гридах невозможна?

Question

[r_g_b_a]

Внезапно обнаружил для себя, что сетка построенная с использованием css grid ведет себя иначе, чем на flexbox, и виной тому свойство gap.
Посмотрите пример https://jsfiddle.net/tm8yqa3v/
Как можете заметить, колонка grid 1_1 имеет другую ширину, чем первые колонки в других блоках.
Чтобы было ровно относительно флекс раскладки - ширина всех элементов должна быть идентичной. Относительно гридов - идентичное количество элементов в строке.
Получается так хваленный модуль css grid для раскладки элементов становится бесполезным, учитывая что большинство макетов рисуются по строгой сетке?

Answer 1

[Юрий]

Скандалы! Интриги! Расследования!

Заголовок уровня ленты.ру, чесслово. Вы не понимаете не то что как работает грид, а даже принципов построения сетки. Ширина колонки в вашем гриде = (ширина контейнера - (гап * (количество колонок - 1))) * fr / 12.
Проблема в том, что колонок в сетке у вас три (или четыре во втором случае), а сумма fr в обоих случаях 12.
Откуда у вас возьмётся одинаковая ширина колонки, если суммарная ширина гапов разная?
Вот примерно так нужно делать, обратите внимание, что в последнем блоке колонки встали как нужно:

Comments

[r_g_b_a]

Заголовок уровня ленты.ру, чесслово.

Не понял ваш сарказм по поводу заголовка, учитывая что в конце него стоит знак вопроса

Откуда у вас возьмётся одинаковая ширина колонки, если суммарная ширина гапов разная?

ниоткуда, я как бы это и написал в первой строке, что проблема в моем примере из-за свойства gap

Лучше объясните, почему 4fr и grid-column: 1/4 дает разный результат

[Юрий]

Вот здесь grid-template-columns: 3fr 4fr 5fr; и здесь grid-template-columns: repeat(12, 1fr); — две разные сетки. В первом случае сетка из трёх колонок разной ширины, во втором — из 12. Общая ширина колонок, из которой и считается fr, равна ширине контейнера за вычетом общей ширины гапов. Если число колонок разное, совершенно очевидно, что и общая ширина колонок, а вместе с ней и значение 1fr, будут меняться. Поэтому и нужна сетка с фиксированным числом колонок, обычно их 12.
Честно, я не знаю, как ещё проще объяснить, это же элементарная математика.

[r_g_b_a]

Вопрос был в другом.
Впрочем, еще раз взглянув в инспекторе на грид линии я понял, в чем была моя ошибка. Спасибо за ваш рабочий пример.