MamaLuyba

Подход к верстке зависит от компании, в которой работаешь: где-то все на флексах, для поддержки старых браузеров, где-то и гридом балуются, где-то БЭМ, где-то - бутстрап, где-то стили в одном общем файле, где-то - для каждой страницы свои, где-то адаптивность, где-то - всё строго по пикселям.
Идеальной схемы нет.
Тебе просто нужно понимать, как что устроено, как ведут себя разные элементы. И тогда ты сможешь применять разные подходы одинаково успешно.
И не стоит искать какие-то идеальные варианты - только время и нервы потратишь.
Понравится флекс - делай на флексах. Грид - на гридах.
Другое дело, что зачастую грид может быть избыточен для текущей задачи - это надо понимать. Но это только с опытом придет.

в общем, т.к. внятного решения нет, думаю реализовывать такой вариант: при загрузке страницы js прогоняет все ячейки через проверку. при проверке берется ячейка с наименьшей высотой, как эталонная. далее, каждый элемент проверяется на соответствие этой высоте. если высота не соответствует (элемент выше), то для элемента увеличивается grid-column: span на единицу. т.е. если высокий элемент имеет span 1, то подставляем span равный 2 и проверяем высоту. если высота стала эталонной, то берем следующий элемент. если нет - опять span увеличиваем на единицу и т.д.
вешаем обработчик на изменение ориентации, чтобы он пересчитывал значения для разных экранов.