[Перевод] Одна строка кода CSS для адаптивного макета

внешний интерфейс CSS

Перевод с:Группа переводчиков Lightning Miner

Оригинальный адрес:medium.com/free-code - от…

Оригинальный автор: Пер Харальд Борген

Оригинальная ссылка на склад:issue

Переводчик:hanxiansen

В этом посте я научу вас, как использовать CSS Grid для создания классной сетки изображений, в которой количество столбцов будет варьироваться в зависимости от ширины экрана. Самое приятное: все адаптивные функции добавлены в одну строку кода CSS. Это означает, что нам не нужно загромождать HTML уродливыми именами классов (например, col-sm-4, col-md-8) или создавать медиа-запросы для каждого экрана. хорошо пойдем.

настраивать

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

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/6/20/16b725f780c7c6b6~tplv-t2oaga2asx-image.image

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 Layout.

Если этот код смущает вас, я предлагаю вам прочитать эту мою статьюLearn CSS Grid in 5 minutes, в котором подробно объясняются основы компоновки.

Сделаем колонки адаптивными.

Базовая единица ответа: дробь

CSS Grid Layout приносит совершенно новую ценность:fractionединица измерения,fractionЕдиницы часто обозначаются аббревиатуройfr, что позволяет разделить контейнер на любое количество фрагментов.

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

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

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

t

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

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

Расширенный ответ

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

repeat()

Сначала мы учимся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. Давайте пропустим фиксированное количество столбцов и заменим 3 адаптивным числом:

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

Эффект следующий:

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

minmax()

Для решения вышеуказанной задачи нам потребуетсяminmax(). Мы заменяем 100px на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()Область определения функции больше или равнаmin, меньше или равноmax.

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

добавить картинки

Завершающим этапом является добавление изображения. Это не имеет ничего общего с макетом CSS Grid, но давайте посмотрим на код.

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

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

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

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

Эффект следующий:

pic

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

Совместимость с браузером

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

Я думаю, что 2018 год станет первым годом использования сетки CSS. Это прорыв и станет обязательным навыком для разработчиков интерфейса, как это произошло с макетами CSS Flexbox за последние несколько лет.

Категории