CSS Grid Generator: сетка, примеры и готовый код

Мастерская: соберите собственную сетку

Выберите готовый сценарий, измените размеры дорожек и промежутки, затем посмотрите, что произошло с макетом и кодом. Начните с «Карточек»: это самый наглядный способ почувствовать разницу между равными колонками и пропорциями 2fr 1fr 1fr. После этого попробуйте макет, в котором один блок занимает несколько ячеек.

В поле размеров пишите значения через пробел: например, 1fr 2fr 1fr для трёх колонок. Выберите блок, чтобы изменить его подпись и начальные или конечные линии. В списке блоков проверьте порядок HTML и сравните его с расположением на холсте. Переключение между содержимым и каркасом помогает увидеть геометрию без декоративных деталей.

Просмотры «Компьютер», «Планшет» и «Телефон» меняют ширину рабочей области. Режим одной колонки до 600px добавляет простой мобильный вариант по порядку HTML. Это начало адаптации; перед публикацией своего макета проверьте длину текста и удобство действий. Сохраните проект JSON, чтобы вернуться к настройкам позднее.

Пять макетов, на которых удобно учиться

Каждый пресет решает свою задачу. Не спешите сразу менять всё: сначала измените один параметр, сравните результат, затем переходите к размещению блоков. Так легче понять, какая строка CSS отвечает за увиденное.

Карточки: услуги, товары и материалы

Равные колонки подходят для повторяющегося содержимого: названий услуг, небольших анонсов, товаров одного типа. Увеличьте промежутки и оцените, осталось ли достаточно места для заголовков. Затем сделайте первую колонку вдвое шире остальных. Такое изменение полезно для композиции с акцентом, но для обычного каталога равные размеры чаще читаются спокойнее.

Страница с сайдбаром: структура целого экрана

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

Редакционная подборка: один главный материал

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

Панель показателей: разные размеры блоков

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

Галерея: ритм крупных и небольших изображений

Одна большая фотография и несколько меньших делают подборку выразительнее. Здесь важно отделять область сетки от самого изображения: размер картинки дополнительно регулируют width, height, aspect-ratio и object-fit. Поэкспериментируйте с промежутком: маленький связывает изображения в композицию, большой подчёркивает самостоятельность каждого кадра.

Как пользоваться оригинальным CSS Grid Generator

Откройте CSS Grid Generator. Для онлайн-работы установка не требуется. Удобный первый опыт — сетка из трёх колонок и двух строк с одним блоком, который занимает две соседние колонки.

1. Задайте основу. В поле Columns поставьте 3, в Rows — 2. Это количество вертикальных и горизонтальных дорожек.
2. Добавьте расстояние. Укажите 16 в Column Gap (in px) и 12 в Row Gap (in px). Первый параметр разделяет колонки, второй — строки.
3. Проверьте размеры. Над колонками и слева от строк расположены отдельные поля. Оставьте в каждом 1fr, чтобы начать с равных пропорций.
4. Нарисуйте область. Нажмите в первой ячейке первой строки и протяните выделение до второй колонки этой же строки. Появится блок .div1.
5. Получите код. Нажмите Please may I have some code. В окне Your Grid Code показан CSS. Кнопка Show HTML переключает представление на разметку, Copy to clipboard! копирует текущий код.

HTML содержит родительский .parent и пустые дочерние .div1, .div2 и так далее — по созданным областям. Добавьте внутрь свой текст или изображения. Генератор задаёт геометрию; внешний вид карточек и правила для разных экранов вы дописываете в своём проекте.

Чтобы удалить отдельную область, используйте её крестик. Reset grid очищает нарисованные блоки; размеры сетки и промежутки проверяйте отдельно. Имена классов и формат выдачи можно посмотреть в исходном компоненте генерации кода.

Что означает код: контейнер, дорожки и линии

Grid-контейнер — родитель с display: grid. Его непосредственные дочерние элементы становятся grid-элементами. Свойства grid-template-columns и grid-template-rows определяют размеры колонок и строк. Подробная терминология есть в руководстве MDN по основам Grid.

Колонка или строка называется дорожкой. Линии — её границы. У трёх колонок четыре вертикальные линии: первая открывает сетку, следующие разделяют колонки, четвёртая закрывает её. Поэтому grid-column: 1 / 3 означает две колонки между линиями 1 и 3. Число после косой черты обозначает конечную границу.

Для нашего опыта оригинальный сервис выдаёт следующую основу:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 12px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 3;
}

В grid-area порядок такой: начальная линия строки, начальная линия колонки, конечная линия строки, конечная линия колонки. Запись 1 / 1 / 2 / 3 занимает первую строку и первые две колонки. Читаемый эквивалент — grid-row: 1 / 2 вместе с grid-column: 1 / 3. См. справочник grid-area.

Как выбрать единицы измерения

Для равных колонок обычно удобно начинать с repeat(3, minmax(0, 1fr)). Нулевой минимум позволяет дорожке сжиматься; длинные ссылки и изображения всё равно нужно оформлять отдельно. Определения fr, процентов и auto приведены в справочнике grid-template-columns, диапазонов — в справочнике minmax().

gap: 12px 16px — короткая запись промежутков: сначала между строками, затем между колонками. Это расстояние между дорожками; внутренние поля карточки задаёт padding, отступ от края контейнера — его собственный padding. Подробнее: свойство gap.

От пустых областей к настоящим карточкам

Создайте файл index.html, добавьте обычную структуру HTML-документа, а в body вставьте такой фрагмент. Если нужно лишь расположить одинаковые карточки по порядку, явные координаты каждому элементу не нужны: браузер разместит их последовательно.

<section class="course-grid" aria-label="Темы курса">
  <article class="course-grid__card">
    <h2>Основы HTML</h2>
    <p>Структура документа и смысл элементов.</p>
  </article>
  <article class="course-grid__card">
    <h2>CSS Grid</h2>
    <p>Строки, колонки и размещение блоков.</p>
  </article>
  <article class="course-grid__card">
    <h2>Адаптивность</h2>
    <p>Макет, который удобно читать на телефоне.</p>
  </article>
</section>

В style.css добавьте собственное оформление и подключите файл через <link rel="stylesheet" href="style.css"> в head. Здесь мы используем классы с префиксом, чтобы пример было проще переносить на существующую страницу.

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.course-grid__card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #c9e3df;
  border-radius: 16px;
  background: #f4fbfa;
  color: #183a36;
  overflow-wrap: anywhere;
}

.course-grid__card h2 { margin: 0 0 12px; }
.course-grid__card p { margin: 0; }

Замените один короткий абзац на длинный, затем добавьте четвёртую карточку. Проверьте, что текст остаётся внутри рамки, а новый элемент переходит на следующую строку. Такой опыт полезнее проверки макета только с одинаковыми заглушками.

Как сделать сетку удобной на телефоне

display: grid само по себе не выбирает подходящее число колонок для каждого экрана. Три узкие колонки останутся тремя, пока вы не зададите другое правило. Для нашего примера добавим переключение на две колонки, затем на одну:

@media (max-width: 900px) {
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .course-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

Значения 900px и 600px — отправная точка для этой демонстрации. Выбирайте границы по реальному содержимому: если заголовки начинают тесниться раньше, переключайте макет раньше. Проверьте ширины 390 и 320 пикселей, а также масштаб браузера 200%.

При ручном размещении блоков на мобильном экране нужно пересмотреть и их координаты. Если у карточки осталось grid-column: 1 / 4, одной объявленной колонки недостаточно: могут появиться дополнительные дорожки. Для простой линейной версии задайте элементам grid-column: auto и grid-row: auto внутри мобильного медиазапроса.

Где открыть и скачать CSS Grid Generator

Для обычной вёрстки достаточно бесплатного онлайн-сервиса: нарисуйте области и скопируйте HTML и CSS. Полученному макету не нужна библиотека генератора. Он работает на свойствах CSS Grid в браузере.

Если хотите изучить или изменить сам генератор, откройте официальный репозиторий sdras/cssgridgenerator. Кнопка Code → Download ZIP скачивает исходники веб-приложения. Их также можно получить через Git:

git clone https://github.com/sdras/cssgridgenerator.git
cd cssgridgenerator
yarn install
yarn run serve

Последние две команды приведены в README проекта. Для локального запуска нужны Node.js и Yarn; открывайте адрес, который покажет команда serve. Для сборки предусмотрена yarn run build. ZIP с исходниками не является готовым установщиком.

Проект использует Vue 2 и Vue CLI 3: зависимости и действительные команды зафиксированы в package.json. Это старый стек, поэтому успешную установку на любой современной версии Node.js обещать нельзя. Сверяйте окружение и ошибки зависимостей; если задача — получить сетку, начните с онлайн-версии.

Исходники распространяются по лицензии MIT, Copyright © 2019 Sarah Drasner. При распространении копии проекта сохраните файл лицензии и указание авторства.

Как забрать пример из нашей мастерской

Скачать исходники нашей мастерской (ZIP): распакуйте архив и откройте index.html. Зависимости устанавливать не требуется; инструкция и лицензия находятся внутри.

Нажмите «Скачать готовую HTML-страницу», чтобы получить статичный макет со встроенным CSS. Откройте файл в браузере и проверьте результат отдельно от статьи. Если нужны отдельные файлы, выберите вкладку HTML или CSS и нажмите её кнопку скачивания либо скопируйте текущий фрагмент.

«Скачать проект JSON» сохраняет настройки для нашей мастерской, а «Открыть проект JSON» загружает их обратно. JSON не является самостоятельной веб-страницей. HTML-экспорт, наоборот, удобно просматривать и редактировать вручную, но он не сохраняет интерфейс настроек. Эти действия относятся к собственному инструменту статьи; официальный проект скачивается из GitHub по инструкции выше.

Порядок блоков и доступность

Визуальное положение блока и его место в HTML могут различаться. При переходе клавишей Tab и чтении вспомогательными технологиями важен порядок документа. Если ссылку из конца HTML поставить в левый верхний угол сетки, посетитель может видеть один порядок и получать другой при навигации.

Сначала выстройте логичную последовательность в HTML: заголовок, основной материал, связанные действия. Затем задавайте композицию через Grid. Избегайте перестановок, которые меняют смысл инструкции или последовательность формы. Рекомендации и примеры: Grid и доступность на MDN.

Как применить сетку в WordPress

Для небольшого статичного макета вставьте HTML в блок «Произвольный HTML», а CSS подключите разрешённым на вашем сайте способом. Дайте компоненту собственный префикс классов, например portfolio-grid. Общие селекторы вроде .parent и .div1 лучше переименовать одновременно в HTML и CSS, чтобы избежать совпадений с темой.

Для мастерской с настройками удобнее отдельный плагин и shortcode: WordPress вставляет компонент в запись, а его CSS и JavaScript подключаются там, где он используется. Сам механизм описан в официальном руководстве WordPress по shortcode.

Не переносите в статью целую оболочку <html>, <head> и <body> из скачанной демонстрации. Нужны содержимое компонента и его стили. После вставки проверьте страницу с активной темой: она может задавать собственные отступы заголовкам, максимальную ширину изображениям и оформление ссылок.

Частые ошибки и как их исправить

Пустой блок почти не виден

В выдаче оригинала нет наполнения карточек. Добавьте содержимое и оформление. Для учебной визуализации можно задать min-height; в рабочем макете проверьте размеры с настоящим текстом.

Две колонки по 50% выходят за контейнер

Проценты уже занимают всю ширину, а промежуток добавляется отдельно. Для двух равных гибких колонок используйте repeat(2, minmax(0, 1fr)) и задайте gap.

После сокращения числа колонок остаётся пустое место

Проверьте конечные линии у элементов. Координаты вне объявленной сетки могут создать дополнительные дорожки. Обновите размещение вместе с размерами контейнера.

Блоки перекрывают друг друга

Сравните их grid-area. Два элемента могут занимать одну область. Если наложение не задумано, измените границы одного из блоков.

В генераторе всё хорошо, а на сайте тесно

Сравните ширину контейнеров, шрифт, длину текста и правила темы. Прототип из пустых прямоугольников не учитывает размеры реального содержимого.

Вопросы перед первым проектом

Нужен ли JavaScript для готовой сетки?

Для статичного расположения HTML-элементов достаточно CSS. JavaScript нужен для поведения самой мастерской и других интерактивных функций вашего проекта.

Можно ли сделать макет адаптивным одним копированием?

Скопированный код задаёт конкретную сетку. Добавьте правила для узких экранов и проверьте настоящий контент. Пример медиазапросов приведён выше.

Grid заменяет Flexbox?

Выбирайте способ под задачу. Для рядов и колонок страницы удобно Grid; для группы кнопок внутри карточки часто достаточно Flexbox. Их можно использовать в разных уровнях одного компонента.

Можно ли собрать сетку без координат каждого блока?

Да. В каталоге одинаковых карточек задайте колонки и промежутки родителю, затем оставьте элементы в логичном HTML-порядке. Явные линии полезны, когда отдельные блоки занимают несколько ячеек.

Что проверить перед переносом на сайт?

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

Когда расположение блоков готово, можно заняться выразительностью коротких заголовков: в материале «CSS-анимация текста: 28 эффектов с примерами и настройкой» есть отдельная мастерская для оформления надписей.