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

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

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

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

display (для значения grid)

grid-template-columns

grid-gap

grid-auto-flow

grid-column / grid-row

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

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

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

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

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

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

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

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

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

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

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

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

Для начала превратим .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, чтобы разместить их. Но сначала пара мелких деталей:

Свойство grid-template-columns используется только для контейнера сетки. Другими словами, вы не найдете его используемым (по крайней мере, правильно) для элемента сетки внутри контейнера.

Свойство принимает множество различных значений, которые определяют количество колонок и их ширину. Здесь нас интересует дробная единица измерения (fr). Я настоятельно рекомендую ознакомиться с обзором Робина, потому что он уникален и в нем прекрасно описано, как выполнять вычисления, чтобы решить, как элементы сетки помещаются внутри контейнера сетки.

Нам нужно шесть колонок равной ширины в .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 размещает элементы один ряд за другим. Вот почему результат в нашем примере выглядит следующим образом:

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

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

Заключение

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

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

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

Мы хотим использовать еще больше спецификаций, чтобы определить более подробную информацию о полученном макете.

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

При создании сетки с помощью grid-template-columns, вы можете задать систему сетки, автоматически определяющую ширину отдельных колонок с помощь ключевого слова auto, или адаптировать ее к существующему содержимому с помощью min-content, max-content или fit-content.

Вы можете разрешить системе сетки автоматически определять количество необходимых колонок с помощью repeat, auto-fill, auto-fit, и minmax. Даже медиа-запросы могут стать ненужными, эти инструменты помогают сделать вещи более гибкими, не добавляя медиа-запросов.

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

Вы можете явно указать ширину столбцов в выбранной вами единице измерения (например, px или %), используя свойство grid-template-columns. Кроме того, доступно свойство grid-template-rows для определения количества и ширины рядов, если их будет определенное количество.

Можно также определить номер конкретного ряда или колонки для размещения в качестве значений для grid-column и grid-row (или использовать свойство grid-column-start, grid-column-end, grid-row-start, или grid-row-end).

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

Автор: Anna Prenzel

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

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