Как сделать такую структуру грида?

Question

[jack iakovenko]

всем привет ! может кто поможет новычку как реализовать такое (скриншот) с помощью гридов?зарание спасибо

Comments

[Вадим]

Было бы идеально если бы Ваш вопрос выглядел так:
Я учусь делать это.
Попробовал вот так и\или так.
Получилось вот так.
Что я сделал не верно?

Потому что сейчас, пусть Ваш вопрос и достаточно простой, выглядит как: у меня лапки, я не могу выделить 1час своего времени на то, чтобы прочитать про колонки и строки в гридах, и потом попробовать сделать самому. Поэтому сделайте за меня, пожалуйста. Как бы подскажите, но на деле сделайте, а я потом по Вашему примеру посмотрю чё как.

Ну и в таком ключе ответ такой:
1) Разделить грид контейнер на необходимое количество колонок\строк.
2) Задать элементам внутри грид контейнера сколько колонок они занимают и с какой колонки начинаются.

Либо первый пункт такой же, но через области(areas).

[Ankhena]

Пройдите игру по гридам https://cssgridgarden.com/#ru

[jack iakovenko]

Вадим, верно надо было и код вставить и конкретнее вопрос задать энивей вот я учусь на гридах только сейчас
вот создал ту самую галерею так:
контейнер у меня 1860px а размеры элементов маеленьких 735х500рх а больших 1109х500рх так вот у меня не получаеться по таким размерам

[Ankhena]

jack iakovenko,

контейнер у меня 1860px а размеры элементов маеленьких 735х500рх а больших 1109х500рх так вот у меня не получаеться по таким размерам

Ну осталось совсем немножко вспомнить математику средней школы.
Вы задали гриду колонки одинаковой ширины.
А теперь посчитайте пропорции и задайте.

Высоту и строки вообще уберите, пусть по контенту растягиваются или пропорционально ширине (с помощью aspect-ratio, если поддержка позволяет либо хаком с паддингом)

[jack iakovenko]

Ankhena, я близко? )) как теперь размеры задать корректно штоб получилось 735px-500px и 1109px-500px?

[Ankhena]

jack iakovenko, близко.
Не понятно откуда -500

Первый столбец 735 частей
Третий тоже 735 частей
Средний 1109 - 735 частей, сколько будет?
И дальше, при возможности, упростить.

[jack iakovenko]

Ankhena, у меня в макете первый и последний баннер с широной 735px а средние с шириной 1109px а в гридах никак не могу достичь точного размера баннеров ))чета нетак делаю

[Ankhena]

jack iakovenko, ну да, ещё отступ нужно учесть между блоками в ту сумму.

Задача из серии "Вася получил 2/5 всех яблок", только в обратную сторону.

[jack iakovenko]

Ankhena, не знаю что я делаю не так может чет не хватает пропысать но при таком вот коде
размеры элементов выходят такие маленькие 589.33px - 500px а большие 1194.66px - 500px а должно быть 735-500 и 1109-500

[Ankhena]

jack iakovenko,

не знаю что я делаю не так

вы продолжаете писать, что у вас столбцы одинаковой ширины...

[jack iakovenko]

Ankhena, а если есть время и сделать добро помочь мне нет? )) и вы отдохнете от меня и моих нубовских вопросов и я увыжу что и как надо будет делать в будущем заодно и спасибо скажу и словечко закину за вас в рай через 136 лет ))
вот код

[Ankhena]

jack iakovenko, как-то так: https://jsfiddle.net/L3faxupe/

[Вадим]

Ankhena, А обещал спасибо сказать)

Answer 1

[imko]

Делаешь грид из трех колонок, первая размером с узкую карточку, третья размером с узкую карточку, средняя размером с разницу между узкой и длинной. Широкой карточке просто даешь grid-column: span 2;
Можно через псевдокласс :nth-child() указать каким карточкам будет задан спан чтобы руками не писать классы каждой

Comments

[jack iakovenko]

вот так?

[imko]

jack iakovenko, не загружает фрейм песочницы, дай ссылку