Как сделать ваш HTML отзывчивым, добавив одну строку кода на CSS

Автор оригинала: Per Harald Borgen
  • Перевод
Привет, Хабр! представляю вашему вниманию перевод статьи «How to make your HTML responsive by adding a single line of CSS» автора Per Harald Borgen.



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

Самое крутое, что для добавления отзывчивости потребуется написать одну строчку кода на CSS

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

Я также создал бесплатный курс по CSS Grid. Нажмите, чтобы получить полный доступ к курсу.



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

Настройка


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



Код на 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.

Давайте начнем с того, что сделаем отзывчивыми колонки.

Базовая отзывчивость


В CSS Grid есть значение, которое записывается как fr и позволяет разбить контейнер на части, количество которых может быть любым.

Изменим значение grid-template-columns на 1fr 1fr 1fr:

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

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



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



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

Улучшенная отзывчивость


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

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

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



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

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

Однако, если мы закодируем, что все столбцы будут иметь ширину, например, строго 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);  
}

Обратите внимание, что вся отзывчивость добавляется написанием одной строки кода на CSS.

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



Как вы можете видеть, это работает отлично. Функция minmax() определяет диапазон размеров, больший или равный min и меньший или равный max.

Таким образом, столбцы всегда будут иметь размер не менее 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.

Поддержка браузеров


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

Я считаю, что владение CSS Grid является обязательным навыком для front-end разработчика.

Так что ознакомьтесь с моим курсом CSS Grid, если вы заинтересовались этой темой.

Спасибо за чтение! Меня зовут Пер, я являюсь соучредителем Scrimba (инструмента для создания интерактивных экранных кодов).
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 38

    +1
    круто
      0
      А что будет с элементами после container если строк в таблице будет не две?
        0

        А что с ними должно быть? Сам container размещается на странице как блочный элемент, пока не определено иное.

          0
          Примерно следующее
          <div class="container">  
            <div>1</div>  
            <div>2</div>  
            <div>3</div>  
            <div>4</div>  
            <div>5</div>  
            <div>6</div>  
          </div>
          <div>after</div>

          image


          image


          image


            0

            Всё правильно, в шаблоне-то задано две строки. На самом деле тут, конечно, не следовало задавать grid-template-rows, тогда строчек было бы столько, сколько реально нужно.

            0
            Это можно решить путём задания свойства grid-auto-rows: 100px; при этом удалив grid-template-rows. Таким образом rows будут создаваться динамически по мере необходимости.
              0

              Изначально kovserg некорректно сформулировал вопрос, а именно: «что будет с элементами после container». «После» — это следующие за ним сиблинги, а не дочерние элементы, которыми управляет grid.

          +2
          А я в 2019 году продолжаю использовать table, скажите, я нормален?
            +5
            На гужевых повозках до сих пор некоторые ездят и нормально. А если серьёзно, то главное не инструмент, а результат, в том числе аккуратный и поддерживаемый HTML. А как там теги зовутся юзеру всё равно.
              0
              Юзеру всё равно, а поисковики возьмут на заметочку.
                0
                Поисковикам без разницы как ты сверстал. Серьёзно.
                  0
                  Может, что-то изменилось, но года три или четыре назад А/Б эксперимент показал, что частично завернутый в таблицу сайт (как это было когда-то у Хабра) Гугл ранжирует нефигово хуже.
                    0
                    А можете подробнее про это? Меняли только вёрстку? Насколько равны были «прочие равные» у вариантов А и Б? Может первым проиндексировался безтабличный вариант и табличный уже оказался менее уникальным?
                      +3
                      Я участвовал тогда в роли верстака, так что всех метрик не знаю. В таблицы были завернуты шапка и подвал (в подвале было прилично информации, не просто адрес и телефон), сайт запускался сразу одновременно в двух доменных зонах (com и net), в net отдавался вариант без таблиц, таргет был на Северную Америку. В бестабличной верстке кода было немного больше, рендеринг был примерно одинаковый. Через 2-3 месяца бестабличный вариант по определенным (каким-то, не уточняйте, я не знаю) ключам был на 2-3 странице выдачи, табличный на 1-2 страницы дальше.

                      Кроме деталей верстки, сайты различались только цветовой гаммой и некоторыми деталями в лого.

                      Мне кажется, что использовать таблицы требуется только там, где они и нужны по смыслу. Сейчас же не лихие девяностые, и в ранжировании учитывается много смысловых / семантических факторов. Представьте, что ваш сайт попадется слабовидящему и он включит озвучание контента.
              +3
              Ну если для таблиц с данными, то думаю да.
                +1

                table, конечно, не заменит grid, но у табличек есть одно замечательное свойство, о котором, как ни странно, мало кто знает: они очень быстро рендерятся браузером. Поэтому, я бы не стал списывать их со счетов даже при разметке лейаутов (в некоторых случаях), а не только при выводе табличных данных.

                  +3

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

                    +3
                    У меня из прошлого отложилось в памяти свойство table-layout: fixed, которое по умолчанию auto. Насколько помню, если задано fixed, то браузер не дожидался загрузки всех данных таблицы и видимо за счет этого рендерил ее еще быстрее. Кроме того ширина колонок вычислялась не по ширине контента, непредсказуемо, а становилась одинаковой, если конечно не заданы конкретные значения с помощью тегов . Это свойство было очень полезно и работало еще во времена ie6.
                      0
                      «с помощью тегов col»
                      парсер съел
                0
                если не нужно поддерживать ИЕ, то гриды — самое то
                  0
                  Подключение другого шаблона для пользователей с браузером IE будет одним из решений этой проблемы.
                    0

                    это правда, но я такое тоже считаю "головняком" :)

                  +2
                  В начале статьи нужно добавить:
                  Используйте: flexbox.
                    –2

                    Нет.

                      +1
                      Flexbox можно свободно использовать с 2017. Ждал нормальной поддержки для css grid и для меня 93% достаточно.

                      Флексбокс не покрывает все кейсы, которые может грид. Если рядков много и есть отступы между элементами нужно обнулять внешние отступы для крайних элементов, а потом опять добавлять и обнулять еще при медиа запросах. Если например нужно сделать высотой в 2 рядка нужно костыли делать на флексбоксе. Так что я рад гриду.
                        0
                        94% (с частичной реализацией) — это в мире, а в России — всего 84,5%. Так что для большинства — это на будущее.
                          0
                          По России просто нет данных. Яндыкс-браузер в первую очередь, ну и прочие там спутники.
                          0
                          caniuse даёт слишком сухие цифры и нужно рассматривать каждый проект отдельно. На проектах в которых я участвую больше 98% пользователей поддерживают flexbox.
                          А вот какой нибудь сайт с рецептами будет чувствителен. Или если вам нужно организовать гарантированную доступность для всех 100%.
                          Я бы сказал что 93% проектов потеряют больше от отказа от flexbox, чем от отказа от клиентов не поддерживающих flexbox.
                        0
                        Точно такая же статья уже есть на Хабре: habr.com/en/company/edison/blog/344878
                          +3
                          Похоже, Хабру нужен поисковик именно по ссылкам на оригинал, чтобы не было повторов. Или вообще автоматический поиск при вставке и предупреждение, что такая ссылка уже есть.
                            0
                            Да, верно. Неприятно вышло. С поиском подобных статей проблемы. Однако обсуждения в комментариях, возможно, дополнят картину
                          0
                          В принципе, неплохо. Да, repeat и minmax немного нагружают рендеринг и замедляют его, относительно прямого распределения grid-ом, но в целом, на малых и средних сайтах, вполне допустимо, и проще гораздо в управлении.
                            +1

                            92% это маловато, так что пока флексы.

                              +2

                              Я подумал, что это существующей разметке добавит отзывчивость.

                                +3

                                Появилось ли решение проблемы последней строки, когда хочется отдельно ее выровнять? Потому что в ней количество элементов, как правило, отличается от предыдущих строк.

                                  +2
                                  Разочарован в статье, ожидал реализации этого анекдота:
                                  Заголовок спойлера
                                  <@insomnia> Нужно выполнить всего три команды, чтобы поставить Gentoo
                                  <@insomnia> cfdisk /dev/hda && mkfs.xfs /dev/hda1 && mount /dev/hda1 /mnt/gentoo/ && chroot /mnt/gentoo/ && env-update &&. /etc/profile && emerge sync && cd /usr/portage && scripts/bootsrap.sh && emerge system && emerge vim && vi /etc/fstab && emerge gentoo-dev-sources && cd /usr/src/linux && make menuconfig && make install modules_install && emerge gnome mozilla-firefox openoffice && emerge grub && cp /boot/grub/grub.conf.sample /boot/grub/grub.conf && vi /boot/grub/grub.conf && grub && init 6
                                  <@insomnia> это первая
                                    0
                                    Благодарю за статью. Все-таки, видимо, прощай bootstrap, да?
                                      0
                                      Ага, сначала флексы появились — хоронили бутстрап, вышел 4-й на флексах, теперь гриды через пару лет в продакшене можно будет юзать — тоже вовсю хоронят, в 5 или 6 версии сетка будет на гридах — опять будут хоронить? БЭМ уж сразу до кучи хороните, и jQuery

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое