Как выполнить grid сетку, если она включает колонки фиксированной ширины?

Question

[aaltqna]

Есть вот такая сетка:


Пытаюсь добиться ее через bs5 row и cols, получилось такое:
https://codepen.io/aaltcode/pen/yLWJjqg

Но:
1) Не нравится вложенность
2) Есть проблемы, разная ширина получается:



Пока идей других нет. Это как-то делается по-нормальному? С таблицой изначально пытался, не получилось

https://getbootstrap.com/docs/5.2/layout/grid/

Comments

[Ankhena]

Это как-то делается по-нормальному?

Чтобы обсуждать как это делать нормально, нужно знать истинную задачу.

С некоторыми ограничениями как-то так https://codepen.io/AnnaSummer/pen/pombKQK

[aaltqna]

Ankhena, как-то вы хитро подточили все под конкретное значение, я изменил переменную --fix и все сломалось. И классы разные у элементов одной ширины. Но логику я понял

[aaltqna]

Ankhena,

Чтобы обсуждать как это делать нормально, нужно знать истинную задачу.

Буквально в макете такая сетка, просто с другим видом и содержанием. Под "нормально" я имел в виду, что без фиксированной колонки все работает в рамках n/12 сетки, но она все мне ломает и выходит какой-то монстр вместо разметки в итоге.

[aaltqna]

https://codepen.io/aaltcode/pen/OJYXwJx

через доп. вложенность добился исправления ширины, но разметка стала еще страшнее

[Ankhena]

aaltqna,

Буквально в макете такая сетка

Сетка однородных элементов такая?
Я бы взглянула на макет.

как-то вы хитро подточили все под конкретное значение, я изменил переменную --fix и все сломалось.

Да, в одном месте забыла заменить 100 на кастомку, поправила
Но и в этом случае будут проблемы, если места останется мало.
И нужно кроме calc, туда ещё min() или max() вставить.
Но я и написала, что это демонстрация сути вычислений, дорабатывайте самостоятельно.

Answer 1

[Сергей delphinpro]

Я не вижу каких-то особых требований к разметке.
Поэтому два грид-контейнера

первые две строки
grid-template-columns: 100px repeat(3, 1fr);

вторые две строки
grid-template-columns: repeat(3, 1fr);

Нахер здесь бутстрап, мне непонятно. Он для жестко-заданной 12-колонной сетки только и подходит...

Comments

[aaltqna]

так? https://codepen.io/aaltcode/pen/QWREXrY. Но так я мог и две таблицы сделать

Нахер здесь бутстрап, мне непонятно. Он для жестко-заданной 12-колонной сетки только и подходит...

Потому что это готовый инструмент, с наличием чего-то что называют grid. И по логике он должен удовлетворять необходимым требованиям. Но если он и правда только для n/12, то незачем

[Сергей delphinpro]

aaltqna,

Но если он и правда только для n/12, то незачем

ну там можно сгенерировать сетку на любое количество колонок, если sass-версию используешь. Используя вложения, можно в принципе любую сетку собрать. Но иногда, как здесь, проще пару строк в css написать.