Вы привели не весь код. Как вы делаете сами блоки внутри? Тем, что вы показали, такой раскладки не добиться. Хотя бы потому что repeat(1, 1fr) создаст одну колонку, а не три. Очевидно наличие отступов между блоками, хотя gap: 0;
А в билде что? Есть вообще упоминания о шрифте? Может какой-нибудь оптимизатор в сборщике решил, что ttf - не модно и вырезал его. Еще в format обычно пишут truetype, а не ttf.
Сергей Кореневский, посмотрел решение. Оно же не учитывает произвольное кол-во колонок. Вы разметили линиями только 3 колонки. Что будет, если в пример добавить еще 12 колонок например, не меняя стилей? Просто дивы добавлять.
Сергей Кореневский, пока не знаю подходящего решения. С таблицами проще, т.к. там сами теги говорят, что это будет колонка, а это строка. В гридах же идет сплошной поток элементов и им надо явно указывать где колонка, а с какого элемента должна начаться новая строка.
Задача в целом интересная, но не уникальная. Погуглил варианты и пока никто не придумал полностью автоматического решения с динамическими колонками/строками.
Если что-то придет в голову, напишу здесь. Если найдете решение, напишите тоже сюда, пожалуйста.
Сергей Кореневский,
1. в условии задачи не было того, что колонок может быть больше и что их количество динамическое.
2. стиль написал для наглядности, его вообще можно не использовать и ничего не поменяется.
При использовании areas в динамике вам надо будет перерисовывать схему в css, т.к. без явного указания кол-ва колонок/строк элементы просто не поймут на какую позицию становиться. Как вариант можно использовать css-переменную, или по классу писать что-то вроде grid-template-columns: auto где количество auto равно количеству колонок.
А если фигуры сложные, то можно по такому же принципу использовать svg, только не забывать закрашивать не только фигуру, но и весь холст в цвет текста.