Как сделать grid css?

Grid — это про строки и колонки сразу, а не только про ряд как во flex. display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; Три карточки в ряд, gap раздвигает без лишних margin, которые вечно слипаются или дублируются. Хочешь адаптив без медиазапросов — меняй фиксированное число колонок на авто-подбор. grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); Тут браузер сам решает сколько карточек влезет в ряд, а minmax не даёт им сжаться меньше 220px. На узком экране останется одна колонка, на широком влезет и пять, никаких точек перелома руками не считаешь. Если нужны строки разной высоты под конкретные блоки — grid-template-rows и grid-template-areas, но для каталога товаров это обычно лишнее, там и repeat с auto-fit решает всё. Ещё момент: grid-gap устарел, теперь просто gap, работает и во flex, и в grid одинаково. Один нюанс на будущее: если карточки должны быть одинаковой высоты в ряду, grid сам растягивает их по умолчанию, в отличие от flex, где для этого нужны дополнительные свойства. Порядок карточек в разметке обычно совпадает с порядком в сетке, но при желании order меняет визуальный порядок без переписывания html, только не увлекайся, для доступности лучше не путать визуальный и настоящий порядок в разметке. И да, дети grid не обязаны быть flex или блочными, любой div внутри просто садится в свою ячейку сам.

Grid включается через display: grid на родителе. Колонки задаются через grid-template-columns, например repeat(3, 1fr) даст три равные колонки. Причина, почему именно fr — эта единица делит свободное место пропорционально, в отличие от процентов не учитывает отступы отдельно. Для адаптива добавьте auto-fit и minmax, тогда число колонок само подстроится под ширину экрана.

1. display: grid на контейнере
2. grid-template-columns: repeat(3, 1fr)
3. gap для отступов между карточками
4. auto-fit и minmax если нужен адаптив