Однак з виходом Firefox 52 і Chrome 57 ситуація змінилася. І майже відразу ж виникла проблема в одному з наших проектів, який представляв собою простий, автономний приклад того, як сітчастий макет може все спростити. Хоча мій приклад не такий вражаючий або надихаючий, як експерименти з макетування Jen Simmons, для мене це маленька перемога. І як часто буває, такі маленькі перемоги часто відкривають шлях до чогось більшого.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Мені видали контент сторінки з наступним пріоритетом:
працюють посилання в двох розділах;
текст з докладним роз'ясненням.
Старий спосіб
У цьому дизайні нам потрібно, щоб всі елементи відступали один від одного на 1.5em з усіх боків. Спочатку я застосував техніку полупаддінгов контейнера і його дочірніх елементів від Samantha Zhang:
Але вона не враховує блоки сайдбара, яким теж потрібні відступи. І padding використовувати я не можу, це спотворить зовнішній вигляд. Можна було б додати контейнери, але я вибрав margin і display: flex ;, щоб запобігти схлопування відступів (нам в будь-якому випадком знадобиться Flexbox на цих елементах). Також потрібно прибрати деякі margin'и сайдбара, щоб врахувати подвійний відступ:
Пора додати адаптивності! На середніх вьюпортах можна повернутися до правила display: flex, за допомогою якого ми розподілили контент сайдбара рівномірно по рядку:
На широких вьюпортах я хочу, щоб сайдбар з'їжджав вправо, а контент був зліва. Я вирішив додати обтікання обох елементів, а це означає, що мені знадобиться clearfix на контейнері:
Результат з підкресленими елементами макета:
Так в чому проблема?
Незважаючи на те, що CSS в цьому демо не самий геніальний, деякі самі незрозумілі прийоми легко прийняти як належне:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
щоб отримати рівні відступи навколо адаптивних шаблонів, необхідно половину відступу застосувати до контейнера і половину до його дочірнім елементам;
flexbox дає нам можливість повідомити про свої наміри в дизайні за допомогою таких термінів, як рядок і стовпець. Однак використовувати можна або те, або інше, і це змушує нас повернутися до менш інтуїтивно зрозумілому властивості float у випадках, коли необхідно змінити обидві осі в один і той же час;
так як ми додали обтікання до всіх дочірнім елементам, ми змушені були використовувати псевдоелементи для штучної очищення контейнера, щоб уникнути порушення в компонуванні елементів сторінки.
Ви могли б сказати: «а чому ти не скористався іншою технікою?». Однак технік без компромісів дуже мало. Якщо сайдбар позиціонувати абсолютно, то його контент не зможе перевищувати основний контент. Якщо перемістити сайдбар в кінець розмітки і змінювати його за допомогою властивості order на незначних обсягах, то вам доведеться налаштовувати індекси вкладок для допоміжних устройсва.
CSS Grid Layout в цьому плані відрізняється. Він був побудований з нуля під дві осі одночасно. Давайте подивимося, як Grid Layout застосовується до цього макету.
Спосіб з Grid
Я говорю браузеру, що контейнер буде використовувати сітку, а відступи між елементами повинні бути 1.5em ... без роздільників:
В сайдбарі будуть ті ж стилі макета і відступи. Насправді, можна було б використовувати display: subgrid, але поки що це занадто складно:
Більше для підходу mobile-first нам нічого не потрібно. На середніх вьюпортах сайдбар перебудовує свої дочірні елементи в дві рівні колонки, кожна з яких займає половину простору:
(З'явилися нові одиниці вимірювання fr, і я обожнюю їх. Скорочення розшифровується як «fractional» і означає «одна частина доступного простору». Можна було б використовувати 50% 50%, але тоді потрібно було б обчислювати grid-gap.)
На великих розмірах ми застосовуємо цю ж техніку до контейнера, тільки першу колонку ми робимо 2fr, щоб вона займала дві третини вільного простору:
За замовчуванням сайдбар вибудовується в один ряд, а дочірні елементи розтягуються, заповнюючи вільний простір. Останній крок - необхідно охопити сайдбар через два ряди контенту і визначити розміри дочірніх елементів сайдбара на основі мінімального розміру, необхідного для відображення їх контенту.
От і все! Свіжа версія з grid нашого раннього демо в тому варіанті, як вона з'явиться в останніх версіях Firefox і Chrome:
Майже на половину менше CSS, немає негативних margin'ов, і майже немає обчислень! Ура!
Забуваємо, що вчили
Час сповіді: мені важко далося демо вище. Мені довелося часто просити допомоги у мого колеги Erik Jung з Cloud Four, щоб все запрацювало так, як гадалося. Озираючись назад, мені здається, що моїм найголовнішим ворогом був мій власний 15-річний досвід написання стилів. Я настільки звик до того, що повинен абстрагуватися від завдання дизайну, звик до того, що я повинен говорити на мові CSS і працювати над його примхами, що зробив завдання складніше, ніж це було потрібно. Я витрачали час, намагаючись хакнуть якісь проблеми, коли все, що потрібно було зробити, це сказати «агов, розтягни div на два ряди».
З цієї вправи я виніс для себе, що CSS Grid Layout це дивовижний інструмент, і я ледь зрозумів кордону його можливостей. Також приємно, що браузери з підтримкою Grid підтримують функціональні запити, і, можливо, ми зможемо ними користуватися набагато раніше, ніж думали. Наступного разу, коли я буду боротися з макетом, постараюся підійти до проблеми як учень, опираючись ментальним «мозолях», який сформувалися за роки обхідних рішень.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі