Как лучше организовать макет для приложения?

Question

[zikkurat01]

С гридами ещё только знакомлюсь, вот в примере как сделать что бы при удалении блока заполнялось пустое пространство? желательно обойтись только css. или может для такого макета вообще лучше взять flexbox?



Если строить на flexbox, в этом случае по идеи надо оборачивать каждые 2 блока в отдельный wrapper, потом при изменении разрешения наверно не получится гибко поменять блоки местами, придётся использовать какие то порталы на js и тд... с кучей заморочек. css grid я слышал двухмерный, мб с ним можно что то придумать ?

Comments

[Ankhena]

В России не работает jsfiddle, так что если хотите, чтобы мы посмотрели песочницу переделайте её на codepen.io или другой работающий аналог.

У гридов есть dense

[zikkurat01]

Ankhena, вставил codepen

[Ankhena]

zikkurat01, Например, так https://codepen.io/AnnaSummer/pen/dydrRpd
если я правильно понимаю чем оно должно заполняться.

[zikkurat01]

Ankhena, вроде так, только адаптивность сломалась) а тут вообще уместно grid?

[Ankhena]

zikkurat01,

только адаптивность сломалась

order расставьте как нужно

а тут вообще уместно grid?

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

[zikkurat01]

Ankhena, спасибо за пример, буду разбираться.
что то с адаптивностью не допру,
у меня было например так на компе:

grid-template-areas:
			'block_1 block_2'
			'block_3 block_4';

так на мобиле:

grid-template-areas:
      'block_1'
      'block_4'
      'block_2'
      'block_3';

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

[Ankhena]

zikkurat01, если нравится писать area, то и верните как было. Мне они мешали на десктопе.
По мне так проще двум блокам задать order, чем area именовать.