Статьи по frontend/web разработке.

Как сделать гибкую верстку, добавив одну строку CSS.

Это статья — адаптированный перевод статьи How to make your HTML responsive by adding a single line of CSS.

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

И самая красивая часть: гибкость будет добавлена ​​с одной строкой CSS.

Это означает, что мы не должны загромождать HTML некрасивыми именами классов (вроде такихcol-sm-2, col-md-4) или создавать media-запросы для каждого размера экрана.

Давайте начнём!

Создание основы.

Для начала создадим простейшую сетку 3х2.

Как сделать гибкую верстку, добавив одну строку 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;
}

Т. е. здесь мы сделали сетку, в которой три столбца шириной 100px и две строки высотой 50px.

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

Простейшая адаптивность с единицей измерения fr.

CSS Grid приносит с собой совершенно новое значение, называемое дробной единицей. Единица дроби написана как fr(от англ. fraction — фракция, доля, дробь, часть), и это позволяет вам разделить контейнер на столько частей, сколько вы хотите.

Давайте изменим каждый столбец на одну дробную единицу.

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

Здесь происходит то, что сетка разбивает всю ширину на три части, и каждый столбец занимает по одной единице. Вот результат:

Если мы изменим grid-template-columnsзначение на 1fr 2fr 1fr, второй столбец теперь будет в два раза шире, чем два других столбца. Общая ширина теперь составляет четыре единицы дроби, а вторая занимает две из них, а остальные - по одной. Вот как это выглядит:

Другими словами, значение единицы дроби упрощает изменение ширины столбцов.

Продвинутая гибкость.

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

repeat()

Начнем с repeat()функции. Это более мощный способ указать ваши столбцы и строки. Давайте возьмем нашу оригинальную сетку и изменим ее на использование repeat ():

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

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

auto-fit

Далее идёт автоподгонка. Давайте пропустим фиксированное количество столбцов и заменим 3 на auto-fit.

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

Это приводит к следующему поведению:

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

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

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);
}

Это приводит к следующему поведению:

И, как вы можете видеть, это работает отлично. Функция minmax()определяет диапазон размеров: первое значение, указанное в скобках — минимальное, второе — максимальное.

Таким образом, столбцы теперь всегда будут иметь размер не менее 100 пикселей. Однако, если есть больше свободного пространства, сетка просто распределит его поровну между каждым из столбцов, поскольку столбцы превращаются в дробную единицу(fr) вместо 100 пикселей.

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

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

Мы начнем с добавления тега изображения внутри каждого элемента сетки.

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

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

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

В итоге, все должно выглядеть так:

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

Подписывайтесь на наш канал в Telegram.