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

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

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

Гибкие блоки

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

grid-template-columns: 150px 150px 150px;
grid-template-rows: auto auto auto;
grid-gap: 20px;

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

grid-template-columns: 33.33% 33.33% 33.33%;

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

Повторения

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
grid-template-columns: repeat(3, 33.33%);

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

Единицы fr

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

grid-template-columns: 1fr 1fr 1fr;

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

grid-template-columns: 2fr 1fr 1fr

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

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

grid-template-columns: 300px 1fr 3fr 20%;

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

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

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

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

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

grid-template-columns: repeat(3, 1fr);

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

Заключение

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

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

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

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

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

Автор: Ian Yates

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Курс по Flexbox

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree