Від автора: у цій статті ми поговоримо про те, як співвіднести боку в CSS. Раніше ми розглянули Співвідношення сторін блоків. У тому числі, як з допомогою відступів зробити так, щоб елемент мав потрібне співвідношення сторін. Потреба у використанні цього методу виникає не часто, оскільки це пов’язано з деякими труднощами. Але час від часу нам все ж буває потрібно зробити це.
Одним з можливих варіантів використання даного методу є Застосування псевдо-елементів, коли цей псевдо елемент задає співвідношення сторін батьківського елемента. Але якщо для розміщення вмісту потрібна велика висота, висота блоку розтягується, і співвідношення сторін порушується.
Ви можете використовувати цей прийом для сіток CSS з елементами grid! Є кілька можливих способів застосування даного методу.
Області сітки та елементи, які для них призначені, не обов’язково повинні мати однакові розміри
Нещодавно ми розглядали дану тему. Та стаття замислювалася як вступ для даної, однак розглянута в ній тема була досить важливою, щоб винести її окремо.
Пам’ятаючи про це, ми можемо вирішити, що нам потрібна область сітки, а також елемент, який буде розтягуватися на всю її висоту і ширину. Або нам просто потрібно задати для елемента співвідношення сторін незалежно від області сітки для якої він призначений?
Сценарій 1. Співвідношення сторін задається для внутрішнього елемента
Круто. Це, можливо, простіше. Переконаєтеся на 100%, що елемент ширше, ніж область сітки, а потім застосуйте псевдо-елемент для обробки розтягування висоти згідно з потрібними пропорціями.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
place-items: start;
}
.grid > * {
background: orange;
width: 100%;
}
.grid > [style^=’–aspect-ratio’]::before {
content: “”;
display: inline-block;
width: 1px;
height: 0;
padding-bottom: calc(100% / (var(–aspect-ratio)));
}
Що дає нам наступне:
Зверніть увагу, що вам не потрібно обов’язково застосовувати пропорції через власні властивості. Ви можете бачити, що розтягнення досягається за рахунок нижнього відступу, значення якого може бути задано фіксоване через код або будь-яким іншим способом.
Сценарій 2. Розміщення декількох стовпців необхідної ширини
Готовий побитися об заклад, швидше за все, те, що вам потрібно — це можливість створити кілька елементів, співвідношення ширини яких буде складати, наприклад 2 до 1. Тобто фактично один елемент розбити на два стовпці. Це дуже схоже на те, що ми тільки що зробили, тільки тут ще додаються правила для створення цих стовпців.
[style=”–aspect-ratio: 1/1;”] {
grid-column: span 1;
}
[style=”–aspect-ratio: 2/1;”] {
grid-column: span 2;
}
[style=”–aspect-ratio: 3/1;”] {
grid-column: span 3;
}
Якщо ми ще додамо grid-auto-flow: dense;, то отримаємо елементи з різними пропорціями, які красиво укладаються.
Зараз найкращий час навести кілька простих прийомів, які дозволяють точно визначити пропорції. line-height для певного тексту може розтягнути блок вище, ніж вам потрібно. Якщо ви использкете grid-gap, це може призвести до порушення пропорцій. Якщо вам потрібно сверхточно задати співвідношення сторін у відповідності з коефіцієнтом, ви можете зробити це жорстко задавши співвідношення через код.
Визначення ширини стовпців також стає важче виконати, якщо ми маємо справу з сіткою, у якої немає заданого кількості рядків. Можливо, у вас може використовуватися повтор / автозаповнення. Ви можете зіткнутися з ситуацією, коли стовпці будуть мати різну ширину в різних рядках. І це також створює труднощі із зазначенням співвідношення сторін. Можливо, ми розглянемо цей сценарій в інший час.
Сценарій 3. Примусове вказівку
Сітка має двовимірну компонування і, якщо захочете, ви можете задати пропорції, просто примусово вказуючи для області сітки відповідність необхідній висоті і ширині. Наприклад, ніщо не заважає нам жорстко задати висоту і ширину стовпців і рядків:
.grid {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-template-rows: 100px 200px 300px;
}
Зазвичай ми так не робимо, тому що нам потрібно, щоб елементи були гнучкими. Отже, краще використовувати для визначення співвідношення сторін методи на основі відсотків, описані вище. Тим не менш, ви можете зробити так:
У цьому прикладі ми примусово вказуємо ширину і висоту області сітки, і елементи розтягуються, щоб заповнити весь її простір, але тоді розміри не можуть адаптуватися.
Практичний приклад
Бен Гошов написав мені, намагаючись створити ось такий макет:
Проблема полягала не тільки в тому, щоб для блоків зберігалося співвідношення сторін, але йому також потрібно було задати вирівнювання всередині них. Є кілька способів зробити це, але я б сказав, що найпростіший з них — вкладені сітки. Ми задаємо для елемента display: grid; і використовуємо можливості вирівнювання цієї нової внутрішньої сітки.
Зверніть увагу, що в цій демо-версії, замість того, щоб вказувати охоплення стовпців ми просто точно задаємо позицію для елементів (це один з можливих варіантів, ви не обов’язково повинні робити точно так само).
