Advertisement
  1. Web Design
  2. CSS Grid Layout

CSS Grid Layout: адаптивные столбцы и удобные отступы

by
Read Time:3 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: A Quick Start Guide
CSS Grid Layout: Using Grid Areas

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

В этом руководстве мы используем разметку из нашего предыдущего урока и будем ее изменять, чтобы лучше понять, как работает сетка. Мы усовершенствуем способ, которым определяем отступы, разберем адаптивную разметку, единицу fr и введем функцию repeat().

Адаптивность

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

Также можно использовать другие единицы измерения, такие как em или rem, например. Или такие нетипичные единицы, как vh и vmin.

В этом случае мы заменим наши пиксели на проценты. Как только мы вручную зададим ширину нашего столбца и ширину отступа, нам нужно будет убедиться, что общее значение не превышает 100%:

Всегда помните про пустые ячейки

Существует новый, более эффективный способ обозначать единицы измерения для отступов. Мы можем использовать свойства grid-column-gap и grid-row-gap, либо компактное grid-gap вместо обоих.

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

Выглядит, конечно, немного грубо, но в целом работает. Разница, которую вы заметите, состоит в том, что ширина  всех вместе столбцов теперь составляет 100%; Разница, как вы можете заметить, состоит в том, что общая ширина всех столбцов составляет 100%; наши отступы будут автоматически выделяется из этой ширины.

Повтор

Давайте запишем это аккуратней, используя функцию repeat():

Это будет означать "повторить 33.3% три раза", что в результате даст нам три столбца. И нам не нужно даже задавать grid-template-rows, т.к. значение auto будет назначено по умолчанию в любом случае. Теперь нам осталось только задать размер наших отступов:

В grid-gap можно указать как статичные, так и относительные единицы измерения, что означает, что мы можем легко и без особых вычислений сочетать адаптивные столбцы с заданными нами отступами.

Перезадаем значения нашим grid-column и grid-row

Что-то не так: у нас все еще много значений grid-column и grid-row в нашей сетке, но они все не работают, т.к. мы уменьшили количество заданных пространств. К счастью, т.к. мы использовали grid-gap чтобы обозначить наши отступы, мы можем оставить позиционирование элементов автоматическому форматированию: контейнеры больше не будут залезать на отступы. Теперь удалите все позиционирование:

Единица fr

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

Всего у нас 3 единицы fr, так что каждый из столбцов будет иметь 1/3 общей ширины. Вот еще пример:

Здесь мы имеем уже 4 единицы fr в общем, так что первый столбец займет ровно половину доступной ширины, а оставшиеся две займут каждый по четверти.

Это по-настоящему мощные единицы, особенно в связке с другими единицами измерения:

В этом примере мы задали четыре столбца:

  • Первый фиксированной ширины в 300px
  • Последний может подстраиваться, имея ширину 20% от общей ширины контейнера
  • единицы fr сами генерируют свою ширину, оставляя второму столбцу всего одну часть от оставшегося пространства
  • а третьему – три части.

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

Вернемся теперь к нашей основной сетке. Давайте заменим неточные и топорные 33.33% на 1fr:

Финальная версия:

Заключение

Итак, вкратце:

  1. В CSS Grid можно использовать относительные единицы измерения вместе с фиксированными.
  2. Нам необязательно задавать отступы в нашей grid-template, вместо этого мы можем использовать grid-gap.
  3. Использование grid-gap означает, что мы меньше привязаны к точному позиционированию контейнеров нашей CSS Grid, большую часть ответственности за это мы можем переложить на автоматическое позиционирование.
  4. функция repeat() сохранит наше время и сделает наш документ легко читаемым.
  5. Единица fr, или fraction, является очень мощной единицей для управления нашей сеткой.

Мы проделали много работы за эти два урока, но теперь вы являетесь обладателем лаконичной и хорошей сетки! В следующем уроке мы разберемся с grid areas, уделив внимание span и нескольким практическим примерам.

Полезные ресурсы:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.