Популярне в Linux

Популярне в Windows

Також читають

/ CSS

CSS Grid

CSS Grid

Визначення CSS Grid

CSS Grid Layout (також Grid або CSS Grid) – модуль CSS – двовимірна система сіток, розроблена для більш зручного створення шаблонів веб сторінок. Модель дозволяє створювати та розміщувати структури, необхідні для забезпечення відгукуваності сайтів на різних пристроях.

Grid являє собою набір горизонтальних та вертикальних ліній утворюючих разом собою стовбці та рядки.

Термінологія CSS Grid

Grid-контейнер – блок до якого використовується властивість display зі значенням grid.

Grid-елементи – прямі нащадки grid-контейнера.

Лінії сітки – розділові лінії, що складають структуру сітки. Можуть бути горизонтальними або вертикальними.

Grid line

Трек (доріжка) сітки – простір між двома сусідніми лініями сітки (стовпці або рядки).

Grid трек

Комірка сітки – проміжок між двома сусідніми рядками та двома сусідніми лініями сітки стовпців.

Grid комірка

Область сітки – загальний простір, оточений чотирма лініями сітки. Може складатися з будь-якої кількості клітин сітки.

Область сітки

Властивості grid-контейнера

display

Властивість визначає елемент як grid-контейнер.

.grid-container {
    display: grid | inline-grid;
}
  • grid – блоковий елемент;
  • inline-grid – отримує характеристики inline-елементів;

grid-template-columns, grid-template-rows

Дві властивотсі за допомогою яких визначають кількість та ширину вертикальних та горизонтальних доріжок (стовпців та колонок).

.grid-container {
    grid-template-columns: 200px 200px 200px;
}

Розмір може бути заданий будь-якою одиницею довжини.

Також в спеціалізації додана нова одиниця довжини – fr – доля від доступного простору в grid-контейнері.

Ще одним варіантом є встановлення мінімального та максимального розміру доріжки за допомогою функції minmax(), де в дужках вказується спочатку мінімальний, а за ним через кому максимальний розмір елемента minmax(100px, 1fr),

Окрім вказування лише розміру стовпця, можна також додавати назву лініям між якими вони знаходяться. Це може знадобитися при позиціонуванні елементів у подальшому.

Наприклад є наступна сітка:

.grid-container {
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

В такому випадку лінії сітки, між якими розташовані ці треки нумеруються звичайними числами від 1 до, в даному випадку – 6, або в зворотному напрямку від -1 до -6 для стовпців, та від 1(-4) до 4(-1) для рядків.

template-columns-rows numbers

Однак замість цифр, лініям можна дати довільні назви:

.container {
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

template-columns-rows names

Лінії можуть мати більш ніж одну назву.

Якщо грід шаблон має повторювані треки, їх можна задавати за допомогою нотації repeat().

Наприклад запис:

.grid-container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

Можна записати як:

.grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

Сітка створена за допомогою властивостей grid-template-columns та grid-template-rows називається явною. Але у випадку, якщо через кількість контенту необхідно більше доріжок – вони створюються автоматично. Такі треки звуться неявним грідом. Їх розмір за умовчуванням ґрунтується на розмірі контенту. Також його можна задати за допомогою властивостей grid-auto-rows та grid-auto-columns.

grid-template-areas

Властивість визначає шаблон сітки використовуючи області що визначаються властивістю grid-елементів grid-area.

Наприклад необхідно створити шаблон з header main sidebar footer та порожнім місцем розміром з клітину в середині розміром 4*3 доріжки:

Макет

В grid-контейнері необхідно створити наступну структуру:

<body class="grid-container">
    <header class="header">Header</header>
    <main class="main">Main</main>
    <aside class="sideabr">Sidebar</aside>
    <footer class="footer">Footer</footer>
</body>

В CSS grid-елементам за допомогою grid-area надати довільні назви:

.header {
    grid-area: h;
} 

.main {
    grid-area: m;
} 

.sideabr {
    grid-area: s;
} 

.footer {
    grid-area: f;
}

Правилу .grid-container додати властивість grid-template-arias де використовуючи назви grid-елементів прописати шаблон.

.grid-container {
    display: grid;
    grid-template-areas:
      "h h h h"
      "m m . s"
      "f f f f";
}

Оскільки шаблон складається з чотирьох стовпців і header займає всю ширину – його вписуємо чотири рази (“h h h h”)

На другому рядку на двох комірках розташовується блок main (“m m”), порожній простір (відмічається крапкою) та сайдбар що займає одну клітину (“s”).

Footer розташований на третьому рядку і, як і header, займає всю ширину (“f f f f”).

grid-template

Скорочення для grid-template-rows, grid-template-columns та grid-template-areas.

Синтаксис.

grid-template: none;
grid-template: grid-template-rows / grid-template-columns;
grid-template: 100px 1fr / 50px 1fr;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: grid-template-areas grid-template-rows / grid-template-columns;
grid-template: "a a a"
               "b b b";
grid-template: "a a a" 20%
               "b b b" auto;

gap

Встановлює проміжки та доріжки між grid комірками. За допомогою gap можна встановити значення одразу як для проміжків, так і для доріжок вказавши як одне число (якщо вони однакові) так і декілька.

gap: 'row-gap' 'column-gap';

Також проміжки можна встановлювати окремо за допомогою column-gap та row-gap.

.container {
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px; 
    column-gap: 10px;
    row-gap: 15px;
}

gap

justify-items

Позиціонує grid-елементи вздовж горизонтальної вісі. Значення застосовується для всіх grid-елементів розташованих в контейнері.

.container {
    justify-items: start | end | center | stretch;
}

start

justify-items-start

end

justify-items-end

center

justify-items-center

stretch (default)

justify-items-stretch

 

align-items

Позиціонує grid-елементи вздовж вертикальної вісі. Значення застосовується для всіх grid-елементів розташованих в контейнері.

.container {
    align-items: start | end | center | stretch;
}

start

align-items-start

end

align-items-end

center

align-items-center

stretch

align-items-stretch

place-items

Встановлює значення align-items та justify-items в одному оголошенні.

.center {
    place-items: <align-items> <justify-items>;
}

Якщо вказати одне значення, воно застосується для обох властивостей.

justify-content

У grid властивість використовується для позиціонування самої сітки в середині grid-контейнера вздовж горизонтальної вісі у випадках, наприклад, коли grid за розмірами менший ніж контейнер.

.grid-container {
    justify-content: start | end | center | space-around | space-between | space-evenly;
}

start

justify-content-start

Вирівнює сітку від початкового краю контейнера.

end

justify-content-end

Вирівнює сітку з кінцевим краєм контейнера.

center

justify-content-center

Розташовує сітку по центру контейнера.

space-between

justify-content-space-between

Розміщує стовпці сітки рівномірно. Відступів між краями grid-контейнера нема.

space-around

justify-content-space-around

Розташовує стовпці рівномірно. Відступи між краєм контейнера та елементом гріда в половину менше, ніж між двома сусідніми елементами.

space-evenly

justify-content-space-evenly

Стовпці розташовані рівномірно. Відступи між краєм контейнера і грід елементом та між сусідніми елементами однакові.

align-content

Аналогічна justify-content властивість тільки позиціонує сітку вздовж вертикальної вісі. Значення аналогічні justify-content.

.grid-container {
    align-content: start | end | center | space-around | space-between | space-evenly;
}

place-content

Встановлює значення align-content та justify-content в одному оголошенні.

.grid-container {
    place-content: <align-content> <justify-content>;
}

Якщо вказано одне значення, воно буде задіяно для обох властивостей.

grid-auto-flow

Властивість керує розміщенням елементів неявного гріда.

.grid-container {
    grid-auto-flow: row | column | dense | row dense | column dense;
}
  • row – елементи почергово заповнюють рядки, за необхідності додаючи нові.
  • column – елементи почергово заповнюють стовбці, за необхідності додаючи нові.
  • dense – елементи будуть намагатись заповнити вільний простір в гріді у випадку, коли в ньому є елементи з різними розмірами.

grid-auto-flow 1

grid-auto-flow 2

grid

Скорочення для grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, та grid-auto-flow.

Властивості grid елементу

grid-column-start

grid-column-end

grid-row-start

grid-row-end

Визначають розташування grid-елемента в гріді за допомогою вказання початкового та кінцевого треку або ліній. …-start – вказує місце де елемент починається, …-end – де закінчується. Ключове слово span використовується для послідовного об’єднання декілька треків.

.grid-item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto;
    grid-column-end: <number> | <name> | span <number> | span <name> | auto;
    grid-row-start: <number> | <name> | span <number> | span <name> | auto;
    grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
  • number – цифра, що вказує на порядковий номер лінії сітки з якої починається, або закінчується grid-елемент, або ім’я лінії.
  • span <number>  – елемент охопить вказану кількість треків.
  • span <name> – елемент охопить простір до лінії з вказаним ім’ям.

Приклади:

.item-a {
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 3;
}

grid-column-row-start-end 1

.item-b {
    grid-column-start: 1;
    grid-column-end: span col4-start;
    grid-row-start: 2;
    grid-row-end: span 2;
}

grid-column-row-start-end 2

grid-column

grid-row

Скорочення для grid-column-start + grid-column-end, та grid-row-start + grid-row-end.

.grid-item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Наприклад

.item-c {
    grid-column: 3 / span 2;
    grid-row: third-line / 4;
}

grid-column-row

grid-area

Можна використовувати як скорочення для grid-row-start + grid-column-start + grid-row-end + grid-column-end:

.grid-item {
    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
.item-d {
    grid-area: 1 / col4-start / last-line / 6;
}

grid-area2

Ще одним варіантом використання властивості є присвоєння імені грід-елементу для можливості посилання на нього в шаблоні, створеному за допомогою розглянутої вище властивості grid-template-areas.

justify-self

Задає вирівнювання grid-елемента всередині комірки вздовж горизонтальної вісі.

.grid-item {
    justify-self: start | end | center | stretch;
}

justify-self-grid

align-self

Задає вирівнювання grid-елемента всередині комірки вздовж вертикальної вісі.

.grid-item {
    align-self: start | end | center | stretch;
}

align-self-grid

place-self

Встановлює обидва значення align-self та justify-self в одному оголошенні. Перше значення встановлює align-self, друге – justify-self:

.item-a {
    place-self: center stretch;
}

Якщо вказано одне значення, воно застосовується для обох напрямків:

.item-a {
    place-self: center;
}

Один коментар

  1. MRX :
    10/02/2023 о 18:36

    верните русский язык к информационным ресурсам этого сайта

    Відповіcти

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *