CSS Grid Layout: Гибкие столбцы и улучшенные зазоры

CSS Grid Layout: Гибкие столбцы и улучшенные зазоры

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

Гибкие блоки

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хм, это немного непривычно, но, похоже, это должно работать. Вы видите, что суммарная ширина столбцов теперь составляет примерно 100%; зазоры будут вычитаться из них автоматически. grid-gap задается, как в фиксированных, так и в гибких единицах измерения. Это означает, что мы можем идеально комбинировать гибкие столбцы и фиксированные зазоры без каких-либо сложных расчетов.

Повторения

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

Это означает «повторить 33.33% три раза». И нам даже не нужно объявление grid-template-rows, поскольку в любом случае для него по умолчанию присваивается значение auto.

Единицы fr

Мы можем сделать еще одно последнее улучшение; мы введем единицы измерения fr или дробные единицы. В одной единице блоке fr описывается «одна часть из всех частей, на которые мы разделяем что-то». Например, мы можем объявить столбцы, используя:

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Здесь мы объявили четыре столбца:

первый с фиксированной шириной в 300 пикселей

последний представляет собой гибкий столбец в 20% ширины контейнера сетки

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

а третий — три четвертых

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

Но вернемся к нашей исходной сетке. Давайте заменим неуклюжее и неточное значение 33.33% на 1fr:

Окончательная демо-версия:

Заключение

Итак, повторим:

Сетка принимает гибкие модули в сочетании с фиксированными.

Функция repeat() позволяет уменьшить таблицы стилей.

Единицы измерения fr или дробные единицы — очень мощный способ описания шаблонов сетки.

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

Автор: Ian Yates

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree