Як створити адаптивний макет CSS Grid

38

Від автора: стаття з серії поняття макета CSS Grid. На минулих уроках ми вивчили синтаксис сіток, вивчили кілька способів розташування елементів на сторінці та попрощалися з деякими старими звичками. У цьому уроці ми застосуємо всі наші знання для створення адаптивного макета на практиці.

Медіа запити

Візьмемо демо з попереднього уроку.

Сторінка складається з двох сіток: головна сітка і вкладений всередину одного з елементів. Ми можемо контролювати наші сітки за допомогою медіа запитів. Це означає, що ми можемо повністю перебудовувати макет під іншу ширину екрану.

Почнемо ми з копіювання оголошення першої сітки. Обернем дублікат медіа запит по техніці mobile-first. В якості точки переходу я взяв довільно 500px.

.grid-1 {
/* стилі для сітки */
}
@media only screen and (min-width: 500px) {
.grid-1 {
/* стилі для сітки */
}
}

Тепер ми змінимо нашу сітку в першому оголошенні, помістивши все в один стовпець. Задаємо один стовпець ми з допомогою властивості grid-template-columns. Перевірте, щоб наші чотири рядки були задані через властивість grid-template-rows і відповідали макету за допомогою властивості grid-template-areas:

.grid-1 {
display: grid;
width: 100%;
margin: 0 auto;
grid-template-columns: 1fr;
grid-template-rows: 80px auto auto 80px;
grid-gap: 10px;
grid-template-areas: «header»
«main»
«sidebar»
«footer»;
}

Щоб уміститися в маленькі екрани, ми зробили grid-gap рівним 10px за замовчуванням. Ось що у нас вийшло. Ви також повинні зазначити, що ми змінюємо властивості padding та font-size в елементах .grid-1 div за допомогою медіа запитів.

Наша вкладена сітка

Код вище змінює наш головний макет. Однак у нас ще є вкладена сітка, яка вперто не хоче позбавлятися від своїх двох колонок на будь-екранах. Щоб виправити це, ми зробимо те ж саме, але візьмемо іншу точку переходу за методом content-first:

.item-2 {
/* стилі сітка */
}
@media only screen and (min-width: 600px) {
.item-2 {
/* стилі сітки */
}
}

На CodePen можна подивитися кінцевий результат. Варто звернути увагу на:

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

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

Автозаповнення та функція minmax()

Існує ще один адаптивний метод, добре підходить для плиткових макетів, який можна застосувати до CSS Grid. Розмір блоків і їх розташування обчислюються автоматично в залежності від ширини екрана.

Автозаповнення

Досі наш підхід полягав у тому, що ми ставили кількість доріжок і дивилися, щоб елементи правильно заповнювали їх. Саме це можна спостерігати в демо нижче. Ми поставили властивість grid-template-columns: repeat(4, 1fr);, яке говорить браузеру: «створи чотири колонки і зроби їх однакової ширини».

Ключове слово auto-fill дозволяє задавати ширину треків, а сітка буде обчислювати, скільки елементів вона зможе помістити в доступне простір. У демо ми взяли grid-template-columns: repeat(auto-fill, 9em);. Так ми сказали браузеру створити колонки шириною в 9em і вмістити якомога більше в контейнер.

Зверніть увагу, що в розрахунках враховуються також роздільники grid-gap. У контейнера темний фон, щоб чітко було видно, скільки вільного простору залишається. В останньому прикладі видно, що залишається незаповнений простір. Як так виходить?

Функція minmax()

Функція minmax() дозволяє задати мінімальний і максимальний розмір треку, щоб сітка працювала в заданих межах. Наприклад, можна задати три колонки. Перші дві зробити шириною 1fr, а останній задати діапазон від максимального значення в 1fr до мінімального 160px:

grid-template-columns: 1fr 1fr minmax(160px, 1fr);

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

Якщо переробити демо з автозаповненням і змінити ширину колонок на minmax(9em, 1fr), сітка б намагалася вмістити максимально можлива кількість треків шириною 9em, а потім розширила б їх до 1fr, поки не заповниться весь контейнер:

Недолік: сітка буде перераховувати треки тільки після перезавантаження, а не при зміні ширини вікна. Спробуйте звузити вікно браузера та оновити сторінку. Для зміни значень можна підключити медіа запити, але вони погано дружать зі зміною ширини вікна браузера.

Висновок

Узагальнимо все вищесказане в списку:

Медіа запити дозволяють нам повністю перебудувати сітку за допомогою зміни властивості grid-template-areas (та інших) для різних сценаріїв.

Властивість transition ніяк не впливає на макет сітки.

Для заповнення контейнера сітки добре підходить ключове слово auto-fill.

Функція minmax() відмінно доповнює автозаповнення, але не дає нам цієї адаптивності.

Тепер ви готові працювати з сітками! Слідкуйте за новими статтями по CSS Grid, практичними вправами, рішеннями поширених проблем з сітками.