Создание контейнера Создадим контейнер с помощью следующего кода: Этот код создаст контейнер с тремя колонками одинакового размера и отступом между элементами в 20 пикселей. Добавление элементов Теперь добавим элементы в контейнер с помощью следующего кода: Здесь мы добавили три элемента с классом «item» в контейнер. Изменение размеров колонок Чтобы изменить размеры колонок, можно использовать свойство grid-template-columns. Например, чтобы создать две колонки разного размера, можно использовать следующий код: Этот код создаст две колонки: первая будет иметь ширину в 200 пикселей, а вторая — займёт всё оставшееся пространство. Добавление адаптивности Чтобы сделать макет адаптивным, можно использовать медиа-запросы. Например, чтобы изменить размер колонок на мобильных устройствах, можно использовать следующий код: Этот код изменит макет на мобильных устройствах так, чтобы была только одна колонка с меньшим отступом между элементами. Добавление отступов между рядами Чтобы добавить отступы между рядами, можно использовать свойство grid-row-gap. Например, чтобы добавить отступ в 30 пикселей между рядами, можно использовать следующий код: Этот код добавит отступ в 30 пикселей между рядами. Заключение Это лишь небольшой пример использования CSS Grid для создания адаптивного макета сайта. С помощью этого инструмента можно создавать сложные макеты с различными элементами и отступами.