Чем oтличaютcя мeждy

Grid - компоновка блоков в виде двумерной сетки. Но не фиксированная табличная вёрстка, задаваемая в HTML, а адаптивная - управляемая CSS. Общий макет страницы - с шапкой, подвалом, боковыми колонками; боковые колонки, уезжающие вниз под контент на узких экранах...

Flex - построчная компоновка блоков. Мы можем точно позиционировать блоки по одной координате, но по другой координате мы можем задать только автоматическое выравнивание.

В строке абзаца помещается столько слов, сколько влезло, а мы можем управлять выравниванием слов в строке, точным расстоянием между строками, минимальным расстоянием между словами и т.д.
А flex - это очень похожее на абзац, но не для слов, а для блоков.

Главное отличие в том, что flex банально не умеет нормально работать с колонками.

Grid обеспечивает большую гибкость в любых вопросах. Нет ни одной задачи, которую можно было бы сделать на flex, но нельзя сделать на grid... только наоборот.

Из-за этой же гибкости grid гораздо сложнее учить и использовать, нежели flex, который постоянно используется в качестве решения самых простых задач. Начинающие и не только чаще всего избегают использования grid, что очень зря.

Главное отличие Flexbox от CSS Grid определяется размерностью. По сути, Flexbox создавался для одноразмерных макетов, а CSS Grid можно было применять к двухмерным макетам. Поэтому CSS Grid может одновременно настраивать и строки, и колонки.
Проще говоря, CSS Grid — это огромный холст, а Flexbox сводится к нескольким опциям, работающим в ограниченном пространстве. CSS Grid создавался для двухмерной организации.

Grid для расположения элементов , flex для расположения контента внутри