4 свойства CSS Grid для большинства ваших потребностей

От автора: CSS Grid предоставляет нам мощную систему верстки для веб-сайтов. Руководство CSS-Tricks предоставляет полный обзор свойств Grid с примерами макетов. В этой статье мы используем обратный подход, мы покажем наименьший возможный набор свойств сетки, который вы должны знать, чтобы он удовлетворял большинство ваших потребностей.

Эти пять свойств помогут вам начать работу:

Вот так просто. Предположим, вы хотите реализовать следующий макет для маленьких, средних и больших экранов.

Маленькие и средние экраны

Большой экран

Это разметка, с которой мы будем работать:

<!-- Stuff before --> <nav class="container-nav"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</nav> <div class="container-main"> <section class="item item-type-a"></section> <section class="item item-type-b"></section> <section class="item item-type-b"></section> <section class="item container-inner"> <section class="item-inner"></section> <section class="item-inner"></section> <section class="item-inner"></section> <section class="item-inner"></section> <section class="item-inner"></section> </section>
</div> <!-- Stuff after -->

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

Теперь мы можем перейти к свойствам сетки!

Используйте display: grid, чтобы разделить страницу на независимые контейнеры макета

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

Как, например:

Где мы проводим грань между тем, что является сеткой, а что нет? Вот личное правило, которому следую я: Если макет в определенной части страницы не помещается в сетку соседней или окружающей части страницы, сделайте эту часть отдельным контейнером сетки.

Я нарисовал на следующем изображении линии сетки в разделе страницы с классом .container-main. Вы можете заметить, что раздел с классом .container-inner из разметки не точно вписывается в сетку рядов.

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

Для начала превратим .container-main в контейнер сетки. Это основной шаг при создании CSS Grid — превращение элемента в контейнер сетки с помощью свойства display:

.container-main { display: grid; }

Нам нужно сделать то же самое с другими контейнерами сетки:

.container-inner { display: grid; } .container-nav { display: grid; }

Используйте grid-template-columns для определения колонок

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

Как это работает? Элемент .container-main имеет в общей сложности две колонки на средних экранах. Если мы возьмем это и умножим на количество колонок на больших экранах (три), мы получим всего шесть колонок.

Мы можем сделать то же самое для панели навигации, элемента .container-inner. На экранах среднего размера есть три колонки, которые мы умножаем на одну колонку на больших экранах, чтобы получить три колонки.

Элемент .container-nav не предоставляет количество колонок. В этом случае система сетки должна автоматически корректировать количество колонок в соответствии с количеством элементов меню. Обычно в меню постоянно добавляются или удаляются элементы, и было бы замечательно, если бы все реагировало соответствующим образом.

Итак, мы определили количество колонок для каждого контейнера сетки. Давайте используем свойство grid-template-columns, чтобы разместить их. Но сначала пара мелких деталей:

Нам нужно шесть колонок равной ширины в .container-main. Мы можем написать это так:

.container-main { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

Или мы можем обратиться к функции repeat() , чтобы упростить код до чего-то более читабельного:

.container-main { display: grid; grid-template-columns: repeat(6, 1fr);
}

Давайте применим это к нашему элементу .container-inner, который, как мы решили, будет состоять из трех колонок.

.container-inner { display: grid; grid-template-columns: repeat(3, 1fr);
}

Используйте сетку, чтобы добавить интервал между элементами сетки

По умолчанию сетка использует все пространство в контейнере сетки. Наличие элементов, впритык друг к другу, может быть требованием к вашему дизайну, но это не относится к конкретному макету, который мы создаем. Нам нужно пространство между элементами!

У нас есть для этого свойство grid-gap. Опять же, это свойство, которое предназначено только для контейнеров сетки, и оно создает вертикальный и горизонтальный интервал между элементами сетки. Это на самом деле сокращенное свойство, которое сочетает в себе свойство для вертикали grid-row-gap и для горизонтали grid-column-gap. Удобно, что мы можем делать что-то подобное, но когда мы работаем с одинаковыми интервалами в каждом направлении, сокращение grid-gap подходит лучше.

Нам нужен зазор между элементами сетки 20px внутри .container-main, 10px — внутри .container-inner и 5px — внутри .container-nav. Нет проблем! Все, что нужно сделать, это написать по одной строке для каждого контейнера сетки.

.container-main{ display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 20px;
} .container-inner { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;
} .container-nav { display: grid; grid-gap: 5px;
}

Используйте grid-column и grid-row для определения размера отдельных элементов сетки

Теперь пришло время привести макет в нужную форму!

Во-первых, это свойство grid-column, которое позволяет нам расширять элемент сетки на n колонок, где n — это количество колонок, которые будут охвачены. Если вы думаете, что это звучит очень похоже на атрибут rowspan, который позволяет нам расширять ячейки на несколько строк в таблицах HTML, вы не ошибетесь.

Мы применяем его к .item в элементе .container-main и к .inner-item в элементе .container-inner:

.item { grid-column: span 6;
} .item-inner { grid-column: span 3;
}

Мы указываем, что каждый элемент занимает шесть рядов в основном контейнере и три ряда во внутреннем контейнере, что является общим количеством колонок в каждом контейнере.

Интересной особенностью CSS Grid является то, что мы можем именовать линии сетки. Они поставляются с неявными именами из коробки, но присвоение им имен — это мощный способ различить начальную и конечную строки для каждой колонки.

Мы можем изменить количество колонок и рядов, которые элементы должны охватывать в разных контрольных точках:

@media screen and (min-width: 600px) { .item-type-b { grid-column: span 3; } .item-inner { grid-column: span 1; }
} @media screen and (min-width: 900px) { .item { grid-column: span 2; grid-row: span 2; } .item-type-b{ grid-row: span 1; } .item-inner{ grid-column: span 3; }
}

Использование grid-auto-flow для управления размещением элементов

CSS Grid размещает элементы один ряд за другим. Вот почему результат в нашем примере выглядит следующим образом:

Размещение колонки за колонкой может быть достигнуто путем установки для свойства grid-auto-flow значения column (row — это значение по умолчанию). Наш макет выиграет от такого размещения, во-первых, потому, что это заставляет пункты меню, размещаться горизонтально. Во-вторых, это приводит элементы класса container в нужную группу.

Заключение

Система сетки позволяет нам работать под девизом «использовать столько спецификаций, сколько необходимо, но как можно меньше». Мы рассмотрели только несколько спецификаций, необходимых для превращения элементов в контейнер сетки CSS, а элементы внутри него — в элементы сетки, чтобы показать минимум, который нам нужно знать для построения даже сложных макетов с помощью CSS Grid.

CSS Grid поддерживает дополнительные случаи использования, когда:

Если применяется первый случай, то стоит рассмотреть следующие дополнительные параметры сетки:

Если применяется второй случай, CSS Grid предлагает вам еще больше вариантов настроек:

И мы даже не затрагивали выравнивание CSS Grid! Тем не менее, тот факт, что мы можем достичь многого, даже не затрагивая эту тему, показывает, насколько мощна CSS Grid.

Автор: Anna Prenzel

Источник: https://css-tricks.com

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