Реализация блоков с разным размером, css grid, как правильнее сделать?

Question

[Антон Вебсайтовский]

Как реализовать как на примере блоки на css grid.



Давно не гридил, что-то у меня выходит совсем не то )
https://codepen.io/AXOT/pen/MWdreOd

Походу надо как-то в сетке использовать пропорции в %
Хотя я так думаю удобнее будет не на грид такое собирать, а просто используя флекс.

Comments

[Ankhena]

Начать нужно с простого

grid-template-columns: repeat(3, 1fr); /* Три колонки одинаковой ширины */

Вы видите в макете 3 колонки одинаковой ширины?
Нет?
И я нет.
Так зачем пишете в css, что они одинаковые?

Дальше варианты могут различаться, но align-self и justify-self помогут.

[Антон Вебсайтовский]

Ankhena, Да это было написано, я просто не стер.

[Ankhena]

Антон Вебсайтовский, теперь стало 12 равных колонок.
Откуда вы их берете?

Три колонки по контенту.
+ align-self и justify-self.

Но если там у дизайнера и правда 12 колоночная сетка (на скрине ею и не пахнет, но может неудачная картинка), тогда остается только правильно раздать колонки.

[Антон Вебсайтовский]

Ankhena, Да это нарисовал дизайн в фигме, а я вот думаю как мне это реализовать в css ), тут явно не сетку надо использовать, а через флекс. Я решил спросить, может спецы подскажут как лучше.

[Ankhena]

Антон Вебсайтовский, ещё раз: грид, три колонки, две строки по контенту или авто. Всё.

[Антон Вебсайтовский]

Ankhena, пример бы, а то я чет по разному пробовал, непонятно что выходит, я там клепал эти колонки, туда сюда)

[Ankhena]

Антон Вебсайтовский,

.block {
        grid-template-columns: repeat(3, auto);
      }
      .item-1 {
        align-self: end;
        justify-self: end;
      }
      .item-2 {
        align-self: end;
        justify-self: start;
      }
      .item-3 {
        align-self: end;
        justify-self: start;
      }
      .item-4 {
        align-self: start;
        justify-self: end;
      }
      .item-1 {
        align-self: start;
        justify-self: start;
      }

[Антон Вебсайтовский]

Вот вариант на абсолютах, https://codepen.io/AXOT/pen/BaeJQrQ
Топорный, но рабочий, надо адаптацию еще делать, и при адаптации с flex, там танцы с бубном конечно будут.

[Ankhena]

Антон Вебсайтовский, это вариант не на флекс, это вариант на абсолютах...

[Ankhena]

Антон Вебсайтовский, https://codepen.io/AnnaSummer/pen/QWRapbX

[Антон Вебсайтовский]

Ankhena, Ой не так написал.

[Антон Вебсайтовский]

Ankhena, Новые для меня свойства, надо изучать, спасибо ! флекс многогранен.