CSS Grid Layout
- Налаштування Sublime Text 3
- Шаблон заявки на замовлення
- CSS властивість background
- CSS властивість position
- Шпаргалка з FLEX
- Одиниці вимірювання CSS
- Застосування класу "ibg"
- CSS властивість transition
- Animation та @keyframes
- Шпаргалка Slick Slider
- Шпаргалка CSS Transform
- Шпаргалка CSS Grid
- Gulp сценарій
- Зарезервовані слова JS
УВАГА! Шпаргалка буде доопрацьовуватися в міру розвитку технології.
Корисні посилання
Варіанти оголошення grid-контейнера. Властивість display
Контейнер-сітка буває двох видів: звичайний display: grid і вбудований display: inline-grid. Перший генерує grid-контейнер рівня блоку, другий - grid-контейнер рівня рядка.
1
2
3
4
5
6
Грід-контейнер визначається як блоковий елемент.
CSS код:
.grid{
background-color: #eee; display: grid;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Грід-контейнер визначається як блочно-рядковий елемент.
CSS код:
.grid{
background-color: #eee; display: inline-grid;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Визначення явної сітки. Властивості: grid-template-rows, grid-template-columns, grid-template, grid-template-areas
Кількість рядків / стовпців визначається за допомогою властивостей grid-template-rows і grid-template-columns. Властивості не успадковуються.
Кожен ідентифікатор сітки в значенні grid-template-areas відповідає комірці сітки. Щойно всі комірки ідентифіковані, браузер об'єднує всі суміжні комірки з однаковими іменами в одну область, яка охоплює всі їхні, за умови, що вони описують область прямокутної форми. Якщо ви спробуєте налаштувати більш складні області, весь шаблон буде недійсним і області сітки не будуть визначені.
1
2
3
4
5
6
fr - одиниця довжини, яка дозволяє створювати гнучкі доріжки. Не є одиницею виміру у звичайному її розумінні, тому не може бути представлена або об'єднана з іншими типами одиниць у виразах calc(). Загальний розмір фіксованих рядків або стовпців віднімається від доступного простору контейнера-сітки. Простір, що залишився, ділиться між рядками і стовпчиками з гнучкими розмірами пропорційно їхньому коефіцієнту.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;}
Або :
.grid{
background-color: #eee; display: grid; grid-template: 1fr 1fr / 1fr 1fr 1fr;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Розміри у % обчислюються від ширини або висоти контейнера-сітки.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: 20% 30% 20%; grid-template-rows: 80% 120%;}
Або :
.grid{
background-color: #eee; display: grid; grid-template: 80% 120% / 20% 30% 20%;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Функція minmax(min,max) визначає діапазон розмірів, більший або рівний min і менший або рівний max. Якщо max < min, то max ігнорується, а minmax(min,max) обробляється як min. Значення в fr можна встановлювати тільки як максимальне.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: minmax(200px,300px) minmax(100px,200px) minmax(250px,150px); grid-template-rows: minmax(100px,110%) minmax(50px,1fr);}
Або :
.grid{
background-color: #eee; display: grid; grid-template: minmax(100px,110%) minmax(50px,1fr) / minmax(200px,300px) minmax(100px,200px) minmax(250px,150px);}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Значення auto орієнтується на вміст елементів сітки однієї доріжки. Як мінімум, розглядається як мінімальний розмір елемента сітки, як визначено min-width або min-height. Як максимум, обробляється так само, як і max-content. Може розтягуватися за рахунок властивостей align-content і justify-content.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr;}
Або :
.grid{
background-color: #eee; display: grid; grid-template: auto 1fr / auto 1fr auto;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Нотація repeat() представляє повторюваний фрагмент списку доріжок, що дає змогу записати в компактнішій формі велику кількість однакових за розмірами стовпчиків або рядків.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr);}
Або :
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,1fr) / repeat(3,1fr);}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Властивість grid-template-areas визначає іменовані області сітки, які не пов'язані з будь-яким конкретним елементом сітки, але на які можна посилатися з властивостей розміщення сітки. Синтаксис властивості забезпечує візуалізацію структури сітки, полегшуючи розуміння загального макета контейнера-сітки. Властивість не успадковується.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: 150px 1fr; grid-template-areas: 'header header' 'sidebar content' 'block-1 block-2' 'footer footer';}
Або :
.grid{
background-color: #eee; display: grid; grid-template: auto / 150px 1fr; grid-template-areas: 'header header' 'sidebar content' 'block-1 block-2' 'footer footer';}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
.grid__item:nth-child(1){
grid-area: header;}
.grid__item:nth-child(2){
grid-area: sidebar;}
.grid__item:nth-child(3){
grid-area: content;}
.grid__item:nth-child(4){
grid-area: block-1;}
.grid__item:nth-child(5){
grid-area: block-2;}
.grid__item:nth-child(6){
grid-area: footer;}
1
2
3
4
5
6
Використовуючи значення auto-fill, ви завжди отримаєте хоча б один стовпчик, навіть якщо він з якоїсь причини не поміщається в контейнер-сітку.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: repeat(auto-fill,minmax(150px, 1fr));}
Або :
.grid{
background-color: #eee; display: grid; grid-template: auto / repeat(auto-fill,minmax(150px, 1fr));}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Якщо ви використовуєте auto-fit, то доріжки, які не містять елементів сітки, будуть скинуті.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));}
Або :
.grid{
background-color: #eee; display: grid; grid-template: auto / repeat(auto-fit,minmax(150px, 1fr));}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Визначення неявної сітки. Властивості: grid-auto-columns, grid-auto-rows, grid-auto-flow
Якщо елемент сітки розташований у рядку або стовпці, розмір яких не визначено явно grid-template-rows або grid-template-columns, створюються неявні доріжки сітки для його зберігання. Це може статися в разі, якщо рядок або стовпець опинилися за межами встановлених розмірів сітки.
Елементи сітки, які не розміщені явно, автоматично поміщаються в незайнятий простір у контейнері-сітці за допомогою алгоритму автоматичного розміщення. Властивість grid-auto-flow керує автоматичним розміщенням елементів сітки без явного положення. Після заповнення явної сітки (або якщо явної сітки немає) автоматичне розміщення також призведе до генерації неявних доріжок сітки. Властивість не успадковується.
1
2
3
4
5
6
За замовчуванням ці автоматично додані доріжки мають мінімальний необхідний розмір. Властивості grid-auto-rows і grid-auto-columns дають змогу контролювати розмір неявних доріжок сітки. Якщо дано кілька розмірів доріжок, шаблон повторюється в міру необхідності, щоб знайти розмір неявних доріжок. Перша неявна доріжка сітки після явної сітки отримує перший заданий розмір і так далі. Властивості не успадковуються.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr / repeat(3,200px); grid-auto-columns: 50px; grid-auto-flow: column;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
За замовчуванням ці автоматично додані доріжки мають мінімальний необхідний розмір. Властивості grid-auto-rows і grid-auto-columns дають змогу контролювати розмір неявних доріжок сітки. Якщо дано кілька розмірів доріжок, шаблон повторюється в міру необхідності, щоб знайти розмір неявних доріжок. Перша неявна доріжка сітки після явної сітки отримує перший заданий розмір і так далі. Властивості не успадковуються.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr / repeat(3,200px); grid-auto-rows: 100px;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Алгоритм автоматичного розміщення розміщує елементи, заповнюючи кожен рядок по черзі зліва-направо (для LTR-мов), додаючи нові рядки в міру необхідності. Значення за замовчуванням.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr / repeat(3,200px); grid-auto-flow: row;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Алгоритм розміщує елементи, заповнюючи кожен стовпчик по черзі зверху-вниз, додаючи нові стовпчики в міру необхідності.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr 1fr / repeat(3,200px); grid-auto-flow: column;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Алгоритм "щільного" укладання елементів. За необхідності може змінювати порядок проходження елементів, заповнюючи порожні місця більшими елементами.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: 1fr 1fr / repeat(3,200px); grid-auto-flow: dense;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Вирівнювання вмісту вздовж горизонтальної осі. Властивість: justify-items
Вирівнює вміст уздовж осі рядка (на відміну від align-items, який вирівнює елементи уздовж вертикальної осі). Це значення застосовується до всіх елементів сітки всередині контейнера. Властивість не успадковується.
1
2
3
4
5
6
Заповнює всю ширину області (за замовчуванням).
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); justify-items: stretch;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює вміст по лівій стороні області.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); justify-items: start;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює вміст по правій стороні області.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); justify-items: end;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює вміст по центру області.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); justify-items: center;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Вирівнювання вмісту вздовж вертикальної осі. Властивість: align-items
Вирівнює вміст уздовж вертикальної осі (на відміну від justify-items який вирівнює елементи уздовж горизонтальної осі). Це значення застосовується до всіх елементів сітки всередині контейнера. Властивість не успадковується.
1
2
3
4
5
6
Заповнює всю ширину області (за замовчуванням).
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-items: stretch;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює вміст по верхній стороні області.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-items: start;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює вміст по нижній стороні області.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-items: end;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює вміст по центру області.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-items: center;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Вирівнювання сітки вздовж горизонтальної осі. Властивість: justify-content
Вирівнює сітку вздовж горизонтальної осі (на відміну від align-content, який вирівнює сітку вздовж вертикальної осі). Властивість не успадковується.
1
2
3
4
5
6
Вирівнює сітку по лівій стороні контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,140px) / repeat(3,100px); justify-content: start;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює сітку по правій стороні контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,140px) / repeat(3,100px); justify-content: end;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює сітку по центру контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,140px) / repeat(3,100px); justify-content: center;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Масштабує елементи, щоб сітка могла заповнити всю ширину контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,140px) / repeat(3,100px); justify-content: stretch;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Однаковий простір між елементами, і напіврозмірні відступи по краях.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,140px) / repeat(3,100px); justify-content: space-around;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Однаковий простір між елементами, без відступів по краях.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,140px) / repeat(3,100px); justify-content: space-between;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Однаковий простір між елементами, і повнорозмірні відступи по краях.
CSS код:
.grid{
background-color: #eee; display: grid; height: 300px; grid-template: repeat(2,140px) / repeat(3,100px); justify-content: space-evenly;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Вирівнювання сітки вздовж вертикальної осі. Властивість: align-content
Вирівнює сітку вздовж вертикальної осі (на відміну від justify-content, яке вирівнює сітку вздовж горизонтальної осі). Властивість не успадковується.
1
2
3
4
5
6
Вирівнює сітку по верхній стороні контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-content: start;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює сітку по нижньому боці контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-content: end;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Вирівнює сітку по центру контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-content: center;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Масштабує елементи, щоб сітка могла заповнити всю ширину контейнера.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-content: stretch;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Однаковий простір між елементами, і напіврозмірні відступи по краях.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-content: space-around;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Однаковий простір між елементами, без відступів по краях.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-content: space-between;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
1
2
3
4
5
6
Однаковий простір між елементами, і повнорозмірні відступи по краях.
CSS код:
.grid{
background-color: #eee; display: grid; grid-template: repeat(2,100px) / repeat(3,1fr); align-content: space-evenly;}
.grid__item{
background-color: #5e5373; border: 1px dashed #ece89d; padding: 10px; color: #fff; font-size: 20px; font-weight: 700;}
Властивості елементів грід-сітки
У розробці.
Повернутися назад
