CSS Grid предоставляет нам мощную систему верстки для веб-сайтов. Руководство CSS-Tricks дает вам полный обзор свойств сетки с примерами компоновки. То, что мы собираемся сделать сейчас, - это обратный подход, чтобы показать вам наименьший возможный набор свойств сетки, которые вам нужно знать, чтобы удовлетворить большинство ваших потребностей в макете.
Эти пять свойств помогут вам встать и работать:
display (для gridзначения)grid-template-columnsgrid-gapgrid-auto-flowgrid-column / grid-rowВот как это просто. Предположим, что вы хотите реализовать следующую компоновку для малых, средних и больших экранов.
Это разметка, с которой мы будем работать:
<!-- 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 -->
Если мы применяем несколько базовых стилей то, что мы получаем, уже достаточно для небольших экранов:
Теперь мы можем попасть в свойства сетки!
Во-первых, нам нужно определить, какие части страницы должны быть выровнены с макетами сетки. Можно определить один макет сетки для всей страницы. Однако для веб-сайтов с очень сложной структурой (например, новостные веб-сайты), обработка большой сетки быстро становится сложной для обсуждения. В этом случае я рекомендую разбить вещи на несколько независимых сеточных контейнеров.
Подобный этому:
Где вы проводите линию между тем, что является и не является сеткой? Вот личное эмпирическое правило, которому я следую:
Если макет в определенной части страницы не помещается в сетку смежной или окружающей части страницы, сделайте эту часть своим собственным контейнером сетки.
Я нарисовал линии сетки в разделе страницы с классом .container-mainна следующем рисунке вы можете заметить, что раздел с .container-innerклассом из разметки не вписывается точно в сетку строк.
Вот еще один возможный макет, где небольшие участки помещаются в окружающую сетку, если выбран более тонкий линейный растр. Отдельный сеточный контейнер здесь совершенно не нужен.
Чтобы начать это, давайте .container-mainв сеточный контейнер. Это основной строительный блок для CSS Grid-превращение элемента в контейнер сетки со displayсвойством:
.container-main {
display: grid;
}Мы хотим сделать то же самое с другими нашими сеточными контейнерами:
.container-inner {
display: grid;
}
.container-nav {
display: grid;
}Затем мы определим количество столбцов, которые нам нужны в каждом контейнере сетки, и насколько широкими должны быть эти столбцы. Мое руководство по количеству столбцов: используйте наименьшее общее кратное максимальному количеству столбцов, необходимых для разных размеров экрана.
Как это работает? .container-mainЭлемент имеет в общей сложности два столбца на средних экранах. Если мы возьмем это и умножим на количество столбцов на больших экранах (три), мы получим в общей сложности шесть столбцов.
Мы можем сделать то же самое для нашей навигации, .container-innerстихии. Есть три столбца на средних экранах, которые мы умножаем на один столбец на больших экранах, чтобы получить в общей сложности три столбца.
.container-navЭлемент не предоставляет никакого количества столбцов. В этом случае система сетки должна автоматически настроить количество столбцов на количество элементов меню. Обычно можно добавлять или удалять элементы в навигации, и было бы здорово, если бы он ответил соответствующим образом, что является чем-то, что сетка может помочь нам немного позже.
Итак, мы определили количество столбцов для каждого контейнера сетки. Давайте использовать grid-template-columnsсвойство, чтобы установить их на место. Но, во-первых пара незначительных деталей:
grid-template-columnsСвойство используется только для контейнера сетки. Другими словами, вы не найдете его используемым (по крайней мере правильно) на элементе сетки внутри контейнера.fr) единица. Я настоятельно рекомендую проверить обзор Робина, потому что он уникален для grid и делает удивительную работу, делая вычисления, чтобы решить, как элементы сетки помещаются внутри контейнера сетки.Нам нужно шесть колонок одинаковой ширины .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 использует все пространство, имеющееся в контейнере grid, для размещения элементов сетки. Наличие элементов заподлицо друг с другом может быть требованием к дизайну, но не для конкретного макета, который мы делаем. Мы хотим немного передышки между вещами!
У нас есть 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свойство, которое позволяет нам расширить элемент сетки через 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;
}
}CSS сетка помещает элементы один ряд за другим. Вот почему результат в нашем примере выглядит именно так на данный момент:
Размещение по столбцам может быть достигнуто путем установки grid-auto-flowсвойству column ( rowэто значение по умолчанию). Наш макет будет получать прибыль от размещения столбцов в двух случаях. Во-первых, это делает наши пункты меню, наконец, появляются в горизонтальной ориентации. Во-вторых, он приводит элементы контейнерного класса в нужную группировку.
Сеточная система позволяет нам работать под девизом: "сделайте столько спецификаций, сколько необходимо, но как можно меньше.” Мы рассмотрели только несколько спецификаций, необходимых для превращения элементов в контейнер CSS grid, а элементов внутри него в элементы сетки, чтобы показать, насколько мало вам нужно знать, чтобы построить даже сложные макеты с помощью 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-columnand grid-row(или использовать свойства grid-column-start, grid-column-end, grid-row-start, or grid-row-end).И мы даже не попали в выравнивание сетки CSS ! Тем не менее, тот факт, что мы можем достичь так много, даже не затрагивая эту тему, показывает, насколько мощна сетка CSS.
Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!
Вас может заинтересовать:
sin()и cos().
<input type="range">) позволяют пользователям выбирать значение в пределах заданного диапазона, предоставляя альтернативные типы ввода, такие как <input type="number">.
