grid и что то не догоняю видать, мне нужно получить вот такой результат, а вот так выходит у меня, может вообще не те свойства использую? https://codepen.io/Bondi_XxX/pen/YzRobGE
Я бы не использовал grid-template-areas, это часто избыточно и запутывает код. Если вам нужно сверстать такую конструкцию единым grid-контейнером, то для начала нужно понять скольки колоночную сетку использовал дизайнер для построения соотношений блоков. Предполагаю, что это 12 колонок. Здесь явно не шести колоночная сетка, так как в правом нижнем углу карточки не 2x, от тех, что в левом верхнем. Включите сетку в фигме и посмотрите на сколько колонок разлинеен этот блок. Именно столько колонок вам нужно задать для грида. Указываете единый gap, ну, а дальше все предельно просто, в селекторе каждого блока вам нужно будет указать на сколько колонок и строк будет распространяться каждый блок с помощью правил grid-column и grid-row. Собственно, это все.
Обсуждают сегодня