Генератор CSS Grid
Бесплатный онлайн генератор CSS Grid-раскладки, визуальный редактор
Основы CSS Grid
CSS Grid — двумерная система раскладки строк и столбцов. grid-template-columns — столбцы, grid-template-rows — строки, gap — интервалы, grid-area — позиционирование. Grid идеален для страничных макетов.
Как использовать Grid-генератор
Установите количество столбцов и строк. Предпросмотр покажет раскладку. Настройте размеры и интервалы. Скопируйте CSS.
▶Grid vs Flexbox — когда что?
Grid — для двумерных макетов (строки И столбцы). Flexbox — для одномерных (строка ИЛИ столбец). Grid — для страниц, Flexbox — для компонентов.
▶Что такое единица fr?
fr (fraction) — гибкая единица распределяющая оставшееся пространство. 1fr 2fr — вторая колонка вдвое шире первой.
▶Могут ли элементы занимать несколько ячеек?
Да: grid-column: span 2 или grid-row: span 2. Также можно использовать именованные grid-области.