Чем меньше каскада, тем лучше. В большинстве случаев. https://habr.com/ru/post/256109/ - ссылка на статью, где описываются самые популярные CSS-методологии организации кода. Подходы разные, но изучив все, можно понять, в каких ситуациях как поступить.
"Налезать", а не "налазить".
А по сабжу, одно из решений: нужно блоку, который появляется по ховеру (.card-description в вашем случае) применить position:absolute и соответствующие стили. В этом случае блок не будет сдвигать нижние карточки.
Magnific Popup, очень неплохой плагин для вывода попап-окон, в том числе и для открытия фотографий в полный размер. https://dimsemenov.com/plugins/magnific-popup/docu...
Можно реализовать множественные галереи на одной странице.
$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
Поддержка Flexbox браузерами на текущий момент получше, чем Grid: https://caniuse.com/#feat=flexbox https://caniuse.com/#feat=css-grid
В остальном выше уже написали. Задачи у технологий несколько разные: флексы выравнивают контент, гриды позволяют работать с модульной сеткой веб-страницы. Сетку можно успешно реализовать и на флексах, просто CSS Grid специально заточена под это и более гибка.