Як CSS Gap додає простір для покращення веб-макетів

| | 0 Comments| 3:35 AM
Categories:

Швидкі посилання

Ключові висновки

  • CSS gap — це універсальна властивість, яка визначає відстань між елементами.
  • gap — властивість швидкого доступу, яка може приймати два значення для визначення проміжків між рядками та стовпцями.
  • gap можна використовувати з макетами Flexbox, Grid і Multi-column.

CSS пропонує багато способів розміщення елементів на ваших веб-сторінках, від абсолютного позиціонування до дизайну на основі сітки. Відстань навколо та між елементами не менш важлива, і, знову ж таки, є багато варіантів. Властивість gap є корисним і універсальним способом введення пробілу, і він працює з кількома різними схемами компонування.

Що таке розрив?

CSS gap — це проста, але важлива властивість стилю, яка допомагає визначити відстань у ваших макетах дизайну. Надати своїм елементам простір – одне із золотих правил композиції, яке слід застосовувати для приємного та ефективного графічного дизайну.

За допомогою цієї властивості можна вказати розмір проміжків між елементами в трьох форматах макета:

Усі сучасні браузери підтримують властивість gap, яка доповнює властивості коробкової моделі, такі як margin і padding.

Як написати властивість пропуску CSS

Основний синтаксис властивості gap:

 gap: <row-gap> <column-gap>;

Кожне значення може приймати довжину або відсоток, а проміжок у стовпці необов’язковий; без нього одне значення застосовуватиметься як до рядків, так і до стовпців. Так:

 gap: 10em; 

…означає, що інтервали між рядками та стовпцями будуть у 10 разів більші за поточний розмір шрифту, тоді як:

 gap: 20px 10%; 

… створить проміжок між рядками у 20 пікселів і проміжок у стовпцях, що становить одну десяту ширини елемента, що містить.

  9 мов програмування, яким загрожує зникнення

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

Використання розриву з Flexbox

Ви можете використовувати проміжок, щоб контролювати простір між рядками та стовпцями, які створює гнучкий макет. Напрямок згинання, який використовує ваш макет, визначатиме, чи буде застосовано розрив між рядками чи стовпцями.

За замовчуванням у звичайному напрямку рядка елементи всередині гнучкого контейнера відображатимуться поруч. Отже, цей простий CSS:

 .flex-layout {
    display: flex;
}

.flex-layout div {
    padding: 1em;
    margin: 10px;
    outline: 1px solid black;
}

Створює такий макет:

Зауважте, що кожен елемент у контейнері використовує класичні властивості коробкової моделі для інтервалів: відступ і поля. Додавання прогалини:

 .flex-layout { gap: 20px; } 

Збільшить простір між елементами flex, але не навколо них:

Якщо у вашому гнучкому макеті елементи відображаються як у стовпцях, так і в рядках, наприклад, шляхом обтікання елементів:

 .flex-layout {
    gap: 20px 40px;
    flex-wrap: wrap;
}

Ви побачите ефект обох прогалин:

  Відновіть невдале завантаження Chrome з того місця, де воно зупинилося [Tutorial]

Завжди пам’ятайте, що інші властивості, як-от margin і justify-content, можуть впливати на простір між елементами. Подумайте про розрив як про мінімальне значення, якщо ви явно не контролюєте всі інші властивості, які можуть впливати на відстань.

Використання розриву з сіткою

Ви також можете використовувати розрив із макетом сітки. Основна відмінність полягає в тому, що зазвичай потрібно вказувати проміжки між рядками та стовпцями, оскільки Grid більше підходить для двовимірних макетів.

Як і в макеті Flex, Grid відображатиме елементи поруч один з одним за замовчуванням, хоча ви можете контролювати відстань навколо кожного елемента за допомогою відступів і полів:

 .grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}

.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
}

Результатом є типовий макет сітки:

Додавання проміжку:

 ​.grid-layout {
    gap: 80px 40px;
}

Вставляє пробіл між кожним елементом:

Зверніть увагу, як тут застосовуються окремі значення для розриву між рядками та стовпцями, створюючи проміжок між рядками, який у два рази перевищує розмір (80 пікселів), ніж проміжок між стовпцями (40 пікселів). Пам’ятайте, що якщо ви використовуєте одне значення, ви визначатимете однаковий проміжок між рядками та стовпцями.

Використання проміжків у макетах із кількома стовпцями

Ви також можете використовувати властивість gap з макетами стовпців, але в цьому випадку має значення лише одне значення; рядків немає. Макети з кількома стовпцями мають проміжок за замовчуванням:

 .column-layout {
    column-count: 3;
}

Але він дуже маленький, розміром 1em:

  11 найкращих внутрішніх камер відеоспостереження для вашого спокою

Це особливо помітно при зміні шрифту і, особливо, якщо ви вирівнюєте текст:

 .column-layout {
    font-size: 14pt;
    line-height: 1.4;
    text-align: justify;
}

Отримані рядки тексту натикаються один на одного, і їх стає незручно читати:

Вказавши проміжок, ви можете збільшити простір між колонами, даючи їм більше простору для дихання.

 .column-layout {
    gap: 2em;
}

Ви можете виявити, що 2em або навіть 3em дають більш читабельний результат, залежно від інших факторів, таких як ширина ваших стовпців:

Пам’ятайте, що ви можете використовувати утиліту браузера, як-от інструменти розробника Google Chrome, щоб перевірити свої макети та побачити, як такі властивості, як проміжки та поля, впливають на ваші макети.

Використовуючи два значення для проміжку, переконайтеся, що ви правильно вказали їх. Порядок «рядок, стовпець» може бути неінтуїтивним, але він збігається з порядком інших властивостей ярлика, таких як відступ і поле.

Точний спосіб використання проміжків буде відрізнятися залежно від схеми макета, до якої ви його застосовуєте. Загалом, однак, ви повинні досягти проміжків, коли вам потрібен рівномірний простір між предметами, але не навколо них.