Модуль CSS Grid состоит из большого количества свойств. Я разбил их на логические группы, чтобы было проще понять что за что отвечает и как использовать.

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