fr делит только свободное место. Если в сетке есть дорожка в 200px, из ширины контейнера сначала вычтут её и все промежутки, а уже остаток разделят между fr.
/tool/css-grid-builder/ работает считает браузер
Задайте колонки, строки и промежутки, проведите мышью по клеткам — получится область с именем. На выходе grid-template-areas, выравнивания и разметка, к которой это всё прикладывать.
Линии нумеруются с единицы, и последняя линия на одну больше числа дорожек — номера подписаны по краям превью.
Ctrl + Z отменяет, Ctrl + Shift + Z возвращает. Последняя сетка сохраняется в браузере и открывается снова при возврате на страницу.
Превью
Формат вывода
——Считает браузер. Превью — настоящая сетка с теми же свойствами, что в готовом коде; после загрузки страница не делает ни одного запроса. Настройки лежат в адресе после решётки — ссылку можно переслать.
Возьмите готовую раскладку или начните с числа колонок и промежутка. Строки при раскладке чаще оставляют на auto: их высоту задаёт содержимое.
Проведите мышью по клеткам превью — так получается область. Впишите ей имя до рисования или переименуйте после: имена уходят в grid-template-areas, а по ним раскладка читается без счёта линий.
Готовую область можно двигать протяжкой, растягивать за уголок в правом нижнем углу и удалять клавишей Delete. Клик выделяет, стрелки двигают, Shift со стрелками меняет размер.
Ширина контейнера применяется к самому превью. Двигайте ползунок от 320 до 1440 — видно, где раскладка перестаёт помещаться; галочка «узкий экран» дописывает под это медиазапрос.
Переключатель «Адаптивная сетка» даёт repeat(auto-fit, minmax(N, 1fr)) — раскладку без медиазапросов, где число колонок считает браузер.
Формат вывода переключается справа: CSS, SCSS, Tailwind, объект стилей для JSX или styled-components. Рядом с кодом стилей всегда лежит разметка под них.
Ширина колонки при 1fr = (ширина контейнера − промежутки) ÷ число колонок
fr делит только свободное место. Если в сетке есть дорожка в 200px, из ширины контейнера сначала вычтут её и все промежутки, а уже остаток разделят между fr.
Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.
Промежутков между четырьмя колонками три: 3 × 16 = 48 px. На дорожки остаётся 720 − 48 = 672 px, на каждую 168 px.
Шапка занимает всю первую строку — колонки с 1 по 4. Это линии с 1 по 5, то есть grid-column: 1 / 5.
Сайдбар — первая колонка второй строки, контент — колонки со 2 по 4 той же строки. Подвал снова во всю ширину.
Все четыре области названы, поэтому вместо номеров линий выходит карта: "shapka shapka shapka shapka" / "sidebar kontent kontent kontent" / "podval podval podval podval".
Каждому блоку остаётся одна строка: .sidebar { grid-area: sidebar; } — номера линий считать больше не нужно.
grid-template-areas из трёх строк плюс по одной строке grid-area на блок — и HTML-разметка, к которой это прикладывается, рядом.
Потому что это номера линий, а не колонок. Блок, занимающий колонки 1 и 2, начинается на линии 1 и заканчивается на линии 3. Правило простое: вторая цифра равна первой плюс количество занятых колонок. Если дать областям имена, считать линии не придётся вовсе — вместо номеров выйдет grid-template-areas.
Карта строится, пока области не налезают друг на друга: каждое имя обязано занимать один сплошной прямоугольник. Стоит двум областям перекрыться — карта становится невозможной, и конструктор молча переключается на номера линий, написав об этом под превью.
В самом CSS — нет, поэтому имя переводится в латиницу по яндексовой схеме: «шапка» становится shapka, «правый блок» — pravyy-blok. Исходное имя остаётся подписью в разметке и на превью, а в код уходит латиница. Совпавшие имена разводятся цифрой.
Grid раскладывает по двум осям сразу и задаёт сетку заранее — элементы встают в готовые дорожки. Flex раскладывает по одной оси, а размеры берёт от самих элементов. Строка кнопок — flex, раскладка страницы — grid.
1fr — это доля свободного места. Но у дорожки есть минимальный размер, равный auto, и длинное неразрывное слово внутри может её распереть. Лечится записью minmax(0, 1fr) вместо 1fr — она есть в списке типов дорожки.
Переключателем «Адаптивная сетка»: он даёт repeat(auto-fit, minmax(240px, 1fr)), и число колонок решает браузер. Ползунок ширины контейнера тут же показывает, на какой ширине сетка перестраивается. auto-fill отличается тем, что оставляет пустые дорожки, а auto-fit их схлопывает — на неполном последнем ряду разница видна сразу.
Да, и это законно: два элемента могут занимать одни и те же клетки, порядок отрисовки решит z-index или порядок в разметке. Конструктор наложение не запрещает, но карту областей для него не строит и переходит на номера линий.
Настройки лежат в адресе после решётки, поэтому ссылку можно переслать или положить в закладки. Последнее состояние конструктор дополнительно держит в памяти браузера и восстанавливает при возврате. Ничего никуда не отправляется: всё считается на вашей стороне.
Считает clamp() для кегля или отступа между двумя ширинами экрана.
Открыть