Как сделать HTML отзывчивым одной строкой в CSS Grid – IT BELKA

В этой статье я научу вас использовать CSS Grid для создания галерей изображений, количество колонок в которых будет меняться вместе с шириной экрана.

Изюминка в том, что отзывчивость HTML будет добавлена с помощью лишь одной строки CSS.

А это значит, что код не будет содержать сложные имена классов (col-sm-4, col-md-8), а вам не придется создавать медиа-запросы для каждого размера экрана.

Что же, начнем!

Создание макета

В этой статье мы будем работать с ранее созданной сеткой. Её созданием мы занимались в статье Learn CSS Grid in 5 Minutes. Если вы вдруг не читали её, не беспокойтесь — HTML и CSS сетки приведены ниже . 🙂

HTML:

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

CSS:

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

Заметка: в этой статье я не буду вдаваться в подробности стилизации и дизайна, ведь она не имеет отношения к CSS Grid .

Отзывчивость с помощью единицы гибкости fr

В CSS Grid разработчики часто используют величину fr — единицу гибкости. Эта величина позволяет разделить блок на необходимое количество частей.

Давайте зададим каждой из наших колонок ширину, равную 1 fr:

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

Общая ширина блока делится на 3 равные части, каждая из которых является шириной одной колонки. Вот результат:

Если мы присвоим колонкам ширины 1 fr, 2 fr, 1 fr, то 2 колонка будет вдвое шире, чем 1 и 3. Общая ширина теперь делится на 4 части — 1 и 3 колонки занимают по одной, 2 занимает две. Вот как это выглядит:

Иными словами, единица гибкости позволяет легко изменять ширину колонок.

Дополнительная отзывчивость

Приведенный выше пример, разумеется, хорош, но от не дает необходимой нам отзывчивости. В данном примере сетка всегда будет иметь ширину в 3 столбца — нам же нужно, чтобы количество столбцов менялось с шириной блока. Для этого нам нужно использовать 3 новых инструмента.

repeat ()

Начнем с функции repeat (). Она позволяет указать количество столбцов и строк. Давайте поместим ее в код нашей сетки и посмотрим, как она работает:

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

Другими словами, repeat(3, 100px) тождественно 100px 100px 100px. Первый параметр указывает на количество колонок, второй — их ширину. В результате мы получили ту же сетку, с которой и начинали работать.

auto-fit

Теперь пришло время использовать auto-fit. Давайте избавимся от фиксированного количества столбцов, применив auto-fit:

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

Полюбоваться результатом можно ниже:

Теперь сетка меняет количество столбцов при изменении ширины блока.

Простым языком: сетка пытается вместить как можно больше столбцов шириной в 100px в блок.

Как бы то ни было, с фиксированной шириной мы не сможем получить желаемой гибкости. На gif выше видно, что сетка оставляет сбоку пустое пространство, когда не может вместить в блок еще одну колонку.

 minmax()

Последний инструмент, необходимый нам для создания отзывчивой сетки — minmax(). В нашем случае мы просто заменим 100 px на minmax(100px, 1fr):

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

}

Заметьте, отзывчивость мы настроили с помощью лишь одной строки CSS. Отлично, не правда ли?

Результат нашей работы можно увидеть ниже:

Как видите, все работает идеально. Функция minmax() задает размер элемента: больший или равный минимальному или меньший или равный максимальному. Отсюда и её название.

Таким образом, наши колонки всегда будут иметь ширину не менее 100px. С увеличением свободного места сетка будет делить его поровну между колонками. Каждые 100 px будет появляться новая колонка.

Добавляем изображения

Последний шаг. Он не имеет отношения к CSS Grid, но мы все же обратимся к коду.
Начнем с того, что добавим картинку в каждый из элементов сетки.

<div><img src="img/forest.jpg"/></div>

Чтобы изображение поместилось в элемент, настроим его размеры под размеры элемента и используем object-fit: cover;. Это позволит картинке полностью занять отведенное ей место; а браузер сможет обрезать ее, если это понадобится.

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

Вот результат нашего кропотливого труда:

Вот и всё! Теперь вы знаете одну из самых сложных концепций в CSS Grid. Наградите себя чашечкой чая или кофе.

Поддержка CSS Grid

Прежде чем попрощаться с вами, мне хотелось бы упомянуть поддержку браузеров. На момент написания статьи 77% глобального веб-трафика поддерживало CSS Grid. К счастью, это число все еще растет.

Я верю, что 2018 год стал годом CSS Grid. Эта технология совершила прорыв и стала необходимым инструментом для каждого разработчика. Надеюсь, что с ней вы сможете создать немало полезных и красивых вещей!

До скорых встреч! <3

Ссылка на оригинальную статью: How to make your HTML responsive by adding a single line of CSS.

 

Оставьте Комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля отмечены *