Custom Grid

Лёгкая кастомная CSS grid-система на SCSS: 12 колонок, гибкие и адаптивные классы колонок, готовый к кастомизации через переменные.

Демо

Живое демо доступно на GitHub Pages: onlydisco.github.io/custom-grid

Возможности

• 12-колоночная сетка на Flexbox
• Классы .col-* для фиксированных колонок и .col для авто-ширины
• Адаптивные классы .col-{breakpoint}-* для пяти контрольных точек
• Контейнеры и ряды с настраиваемым отступом между колонками
• Кастомизация всех параметров через SCSS-переменные с !default
• Нормализация стилей из коробки

Быстрый старт

npm install
npm run sass-watch

Скрипт sass-watch компилирует scss/style.scss в css/style.css и следит за изменениями.

Установка как npm-пакет

Пакет называется custom-grid, описание — «Custom CSS grid system built with SCSS»:

npm install custom-grid

После установки скрипт компиляции доступен как npm run sass-watch, зависимости (Sass) ставятся как devDependencies.

Использование

Подключите стили:

<link rel="stylesheet" href="css/style.css" />

Контейнер

<div class="container">...</div>

Ряд и колонки

<div class="row">
  <div class="col-4">1/3 ширины</div>
  <div class="col-8">2/3 ширины</div>
</div>

Класс .col без числа занимает оставшееся место (flex: 1).

Адаптивные колонки

<div class="row">
  <div class="col-12 col-md-6 col-lg-3">Лого</div>
  <div class="col-12 col-md-6 col-lg-9">Навигация</div>
</div>

Брейкпоинты (mobile-first, min-width):

Префикс	Минимальная ширина
xs	0
sm	576px
md	768px
lg	992px
xl	1200px
xxl	1400px

Кастомизация

Параметры сетки задаются переменными в scss/grid/_variables.scss:

Переменная	По умолчанию	Описание
$container-max-width	1350px	Максимальная ширина контейнера
$grid-columns	12	Количество колонок
$grid-gap	30px	Расстояние между колонками
$grid-breakpoints	см. таблицу	Карта контрольных точек

Все переменные объявлены с !default, поэтому их можно переопределить в собственном файле до подключения сетки:

@use 'sass:math';

$grid-columns: 16;      // сетка на 16 колонок
$grid-gap: 24px;        // отступ между колонками
$container-max-width: 1200px;

Структура проекта

├── index.html        # демо-страница
├── package.json      # npm-пакет (имя, скрипты, зависимости)
├── scss/
│   ├── style.scss    # точка входа
│   ├── grid/         # переменные, миксины, классы сетки
│   └── normalize/    # нормализация стилей
└── css/
    └── style.css     # скомпилированный CSS

Скрипты

Команда	Описание
npm run sass-watch	Компиляция SCSS и слежение за файлами