Як зробити ваш HTML чуйним, додавши один рядок CSS

У цій статті я навчу вас, як використовувати сітку CSS для створення надзвичайно здорової сітки зображень, яка варіює кількість стовпців із шириною екрана.

І найкрасивіша частина: чуйність буде додана одним рядком CSS.

Це означає , що ми не повинні захаращувати HTML з некрасивими іменами класів (тобто col-sm-4, col-md-8) або створювати медіа - запити для кожного розміру екрана.

Якщо ви хочете навчитися створювати адаптивні веб-сайти на професійному рівні, ви можете спробувати перевірити адаптивний завантажувальний кемпінг веб-дизайну Scrimba, оскільки він займає студентів від початківців до просунутих за 15 годин інтерактивних підручників.

Тепер давайте стрибнемо в це!

Налаштування

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

Ось HTML:

 1 2 3 4 5 6 

І CSS:

.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } 

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

Якщо цей код вас бентежить, я рекомендую вам прочитати мою статтю Learn CSS Grid за 5 хвилин, де я поясню основи модуля компонування.

Почнемо з того, щоб зробити стовпці гнучкими.

Базова реакція на одиницю дробу

CSS Grid приносить із собою цілком нове значення, яке називається одиницею дробу. Одиниця дробу пишеться як fr, і це дозволяє розділити контейнер на стільки фракцій, скільки потрібно.

Давайте змінимо кожен із стовпців на ширину в один дріб.

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

Тут відбувається те, що сітка розбивається на всю ширину на три фракції, і кожна колонка займає по одній одиниці кожна. Ось результат:

Якщо ми змінимо grid-template-columnsзначення на 1fr 2fr 1fr, другий стовпець тепер буде вдвічі ширшим, ніж два інші стовпці. Загальна ширина тепер становить чотири одиниці дробу, а друга займає дві з них, тоді як інші займають по одній. Ось як це виглядає:

Іншими словами, значення одиниці дробу полегшує вам зміну ширини стовпців.

Розширена чуйність

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

повторити ()

Почнемо з repeat()функції. Це більш потужний спосіб вказати ваші стовпці та рядки. Давайте візьмемо нашу оригінальну сітку і змінимо її на використання repeat ():

.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px); } 

Іншими словами, repeat(3, 100px)ідентичний 100px 100px 100px. Перший параметр визначав, скільки стовпців або рядків ви хочете, а другий визначає їх ширину, тому це просто дасть нам точно такий же макет, як ми починали з:

автоматична підгонка

Тоді є автоматична підгонка. Давайте пропустимо фіксовану кількість стовпців, а замість 3 замінимо на auto-fit.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); } 

Це призводить до наступної поведінки:

Тепер сітка змінює кількість стовпців залежно від ширини контейнера.

Він просто намагається вмістити в контейнер якомога більше стовпців шириною 100 пікселів.

Однак, якщо ми жорстко кодуємо всі стовпці рівно 100 пікселів, ми ніколи не отримаємо потрібної гнучкості, оскільки вони рідко складаються на всю ширину. Як ви можете бачити на зображенні вище, сітка часто залишає пробіл з правого боку.

minmax ()

Останній інгредієнт, який нам потрібен для того, щоб це виправити, називається minmax(). Ми просто замінимо 100px на minmax(100px, 1fr). Ось остаточний CSS.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); } 

Зверніть увагу, що вся реакція відбувається в одному рядку CSS.

Це призводить до наступної поведінки:

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

So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.

Adding the images

Now the final step is to add the images. This has nothing to do with CSS Grid, but let’s still look at the code.

We’ll start off by adding an image tag inside of each of the grid items.

To make the image fit into the item, we’ll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it’s needed.

.container > div > img { width: 100%; height: 100%; object-fit: cover; } 

Which ends up like the following:

And that’s it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.

Browser support

Before we end, I also need to mention browser support. At the time of writing this article, 93% of global website traffic supports CSS Grid, and it’s climbing. It's becoming more and more clear that Grid is turning into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox a few years ago.

If you want to learn Flexbox, Grid and responsive design once and for all, you should check out the responsive web design bootcamp on Scrimba. It'll take your beginner to advanced through interactive tutorials that are easy to follow.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba, an interactive learning platform for learning to code.