CSS GRID

властивості контейнера і властивості елемента за специфікацією css-grid-2 — і що кожна робить із розкладкою

Аркуш зроблено як памʼятку, а не як таблицю: угорі те, заради чого його вішають на стіну й читають з іншого кінця кімнати, нижче — повна довідка дрібнішим.

Три розміри в одному архіві — від аркуша на холодильник до плаката на стіну.

Формати: A4 · A3 · A2
Що ви отримаєте: PDF, готові до друку, по одному на кожен формат, з усіма літерами в кривих — нічого не треба ставити й ніщо не попливе.
Предмет: код · початківцям · довідник · кабінет

Властивості та значення — CSS Grid Layout Module Level 2 (W3C CRD, 26 березня 2025, w3.org/TR/css-grid-2): перелік аркуша звірено з Property Index, правило відʼємних ліній і означення fr процитовано дослівно. Пропорції намальованих доріжок пораховано з тих самих часток fr. Звірено 2026-08-13.

ЛІНІЇ РАХУЮТЬСЯ З ОБОХ КІНЦІВ

Лінії сітки рахуються з обох кінців: −1 — остання явна лінія, каже специфікація дослівно. Тому grid-column: 1 / −1 розтягує елемент на всю ширину, не знаючи, скільки в сітці доріжок.

Розмітка від цього не ламається: «на всю ширину» пишеться однаково в сітці на три колонки й на дванадцять — код героя вгорі працював би без змін.

Що на аркуші

Властивості та значення — CSS Grid Layout Module Level 2 (W3C CRD, 26 березня 2025, w3.org/TR/css-grid-2): перелік аркуша звірено з Property Index, правило відʼємних ліній і означення fr процитовано дослівно. Пропорції намальованих доріжок пораховано з тих самих часток fr. Звірено 2026-08-13.
Колір несе зміст, але зміст не тримається лише на кольорі — аркуш читається і в ЧБ.
Жодного пояснення про те, як ми його робили: на аркуші лише те, що потрібно читачеві.

Друк

Три розміри в архіві: A4 — 210×297 мм, A3 — 297×420 мм, A2 — 420×594 мм.
Увесь текст переведено в криві. Шрифти ставити не треба, і ніщо не попливе на чужій машині.
Білий фон і ощадна заливка — аркуш друкується на побутовому принтері без відра фарби.
Поля не менші за 10 мм: побутовий принтер не друкує під обріз.
Жоден штрих не тонший за 0,3 мм, тож нічого не зникне при друці.

Чому цим числам можна вірити. Кожне лічильне число тут обчислене з даних, а не набране руками, і аркуш проходить 9 незалежних перевірок, перш ніж його дозволено зібрати: скільки елементів, у якому порядку і саме твердження у виділеному блоці. Не пройде бодай одна — файла просто не буде.

Схоже

CSS GRID

ЛІНІЇ РАХУЮТЬСЯ З ОБОХ КІНЦІВ

Що на аркуші

Друк

Схоже

ВІХИ ШТУЧНОГО ІНТЕЛЕКТУ

ТАБЛИЦЯ ASCII

АУДІОФОРМАТИ

КОДУВАННЯ BASE32