Шпаргалка по CSS Grid будет полезна для тех, кто только начинает использовать эту технологию при верстке сайтов. В сегодняшней статье мы подробно разберем эту технологию, чтобы по ее использованию не возникало больше вопросов. Поэтому наша статья — это и есть та самая «шпаргалка по CSS Grid».
CSS Grid — это технология двухмерного макетирования верстки. При ее использовании макет веб-страницы разбивается на «столбики» и «строчки». Таким образом образуется табличное представление сайта со множеством ячеек. В каждой «ячейке» можно располагать какой-то контент, а самими ячейками можно гибко управлять. Например, можно изменять их размерность или местоположение, используя для этого специальные CSS-свойства.
CSS Grid
Технология CSS Grid поддерживается всеми современными обозревателями интернета, поэтому не нужно бояться использовать ее в своей разработке. По сути, «грид» разделяет веб-страницу набором горизонтальных вертикальных линий, которые и образуют «сетку» с ячейками. Веб-разработчик может воздействовать и на «линии» сетки, и на образовавшиеся ячейки.
Изучая CSS Grid, веб-разработчик сталкивается со следующими определениями:
Линии сетки. Это основной и невидимый компонент CSS Grid, который образовывает «сетчатые» веб-страницы. На эти компоненты можно ссылаться и воздействовать на их состояние, так как они задаются с индивидуальным числовым индексом. Известны два вида линий: горизонтальные, которые образуют строчки сетки, и вертикальные, которые образуют столбики сетки.
Дорожки сетки. Область между двумя параллельными линиями образует дорожку сетки. Дорожки также могут быть горизонтальными и вертикальными. Длина дорожки зависит от контейнера, в котором объявлена технология CSS Grid. Ведь при помощи «грид» можно сделать общий макет сайта с «хедером», «телом сайта» и «футером». Но также можно сделать отдельный блок, например, блок с фотографиями или статьями.
Ячейка сетки. Когда две параллельные линии пересекаются с другими двумя параллельными линиями, тогда на своем пересечении они образуют ячейку. Ячейка является местом, где можно разместить какой-то контент веб-сайта.
Область сетки. Область сетки — это условная величина. Она может состоять из всех ячеек сетки. Но также может состоять из нескольких ячеек сетки или даже из одной единственной ячейки. Такую область веб-разработчик создает самостоятельно.
Элемент сетки. Все, что составляет сетку, является ее элементом, начиная от ячейки и линий и заканчивая контентом внутри сетчатого контейнера.
Компоненты CSS Grid
Шпаргалка по CSS Grid продолжается. Для того чтобы верстать, используя технологию CSS Grid, нужно сначала назначить контейнер-сетку. Контейнер-сетка — это такой блок, который будет формироваться при помощи «грид»-возможностей. В виде такого контейнера может выступать вся страница либо какой-то отдельный ее блок — это не имеет значения. Определяя контейнер-сетку, вы назначаете контекст формирования контента внутри него.
Объявить контейнер-сетку можно двумя CSS-свойствами:
«display: grid». Это свойство генерирует сетчатый контейнер уровня отдельного блока на всю ширину веб-страницы.
«display: inline-grid». Это свойство генерирует встроенный блок уровня строки.
Просто определить контейнер-сетку — это мало. Потому что по умолчанию такой контейнер будет состоять только из одной строки и одного столбца, то есть одной ячейки, занимающей весь контейнер. Но, чтобы воспользоваться возможностями CSS Grid, нам нужна сетка внутри контейнера.
Для того чтобы сформировать внутри контейнера сетку, используются следующие CSS-свойства:
«grid-template-rows». Определяет количество строк.
«grid-template-columns». Определяет количество столбцов.
Как это выглядит в коде:
.MyGridContainer {
display: grid;
grid-template-rows: 4em 150px 6.5vh; /* определяем 3 строчки */
grid-template-columns: 150px 4em 50%; /* определяем 3 колонки */
}
Как видно, в свойствах, определяющих строки и столбцы, мы сразу указываем их размер. Причем размер можно указывать в разных удобных величинах. Таким образом, в нашем примере мы определили контейнер-сетку, которая будет состоять из 3 столбцов и 3 строчек или из 9 ячеек разного размера. Для того чтобы ячейки были более гибкими, можно определять их размер условным исчислением «fr» или при помощи значения «auto». В последнем случае ячейки будут подстраивать размер под свое содержимое.
Также в CSS Grid присутствует свойство, обозначающее область сетки, — это «grid-template-areas». Это удобное свойство, когда нужно определить отдельную область из всего количества ячеек, чтобы отделить ее от остальных грид-компонентов.
В коде это может реализоваться следующим образом:
.MyGridContainer {
display: grid;
grid-template-areas: "header header header" //определяем 3 ячейки для хедера
"sidebar post1 post2"
"sidebar post3 post4";
grid-template-columns: 250px 2fr;
grid-template-rows: 40px 1fr 50%;
}
header {
grid-area: header;
}
aside {
grid-area: sidebar;
}
main {
grid-area: post;
}
Как видно из примера, мы идентифицируем ячейки не размерами, а специальными идентификаторами: «header», «sidebar», «post1»-«post4». Таким образом, браузер объединит все грид-компоненты с идентичным идентификатором в единую область, которую мы сможем стилизовать по-своему. Такой подход удобен, когда нужно разделить сетчатый контейнер на семантически связанные блоки. К примеру, контейнер-сетка — это вся веб-страница. Тогда семантические блоки у нее будут: «хедер», nav (меню), sidebar, main, «футер» и др.
Шпаргалка CSS Grid: пример шаблона веб-страницы
Вся сложность в применении CSS Grid — это правильно разметить количество ячеек. Далее с ячейками и контентом внутри них довольно просто взаимодействовать, потому что взаимодействие происходит как с обычными блоками.
Давайте представим, что вам нужно разметить веб-страницу при помощи CSS Grid. На веб-странице будет:
«шапка» сайта,
чуть ниже справа будет сайдбар с виджетами,
ниже «шапки» слева будет еще один сайдбар для размещения рекламных блоков,
внизу будет «подвал» сайта.
HTML код такого шаблона будет следующий:
<body>
<header id="MyPageHeader">Здесь будет содержание «шапки сайта»</header>
<article id="MyMainArticle">Здесь будет основной контент сайта</article>
<nav id="MyMainNav">Это будет левый сайдбар с меню и виджетами</nav>
<div id="MySiteAds">Это будет правый сайдбар с виджетами рекламы</div>
<footer id="MyPageFooter">Это подвал сайта</footer>
</body>
Мы провели основную разметку веб-страницы. В каждом основном элементе может располагаться много других элементов, составляющих полноценную страницу. Однако наша задача — показать, как размечается такой сайт с использованием технологии CSS Грид.
В описанном выше примере CSS-код будет реализован следующим образом:
body {
display: grid;
grid-template-areas:
"header header header" //определяем 3 верхние ячейки под хедер
"sidebar article advs" //распределяем ячейки между остальными блоками, чтобы получилась "колонка"
"sidebar article advs" //еще раз распределяем ячейки между остальными блоками, чтобы в верстке получились "столбцы" из 2-х ячеек
"footer footer footer"; //нижние 3 ячейки оставляем под футер
grid-template-rows: 75px 2fr 75px 75рх; //задаем ширину строчкам
grid-template-columns: 25% 2fr 13%; //задаем ширину "столбцам"
grid-gap: 11px;
height: 101vh;
margin: 0;
}
/* Определяем общие стили нашим блокам*/
header, footer, article, sidebar, div {
padding: 18px;
background: #ffff;
}
/*Определяем каждой отдельной области идентификатор из HTML, здесь же можно задавать индивидуальные стили каждому отдельному блоку*/
#MyPageHeader {
grid-area: header;
}
#MyPageFooter {
grid-area: footer;
}
#MyMainArticle {
grid-area: article;
}
#MyMainNav {
grid-area: sidebar;
}
#MySiteAds {
grid-area: advs;
}
Заключение
Grid CSS — это та технология, которую необходимо пробовать в работе и экспериментировать, чтобы разобраться с ее возможностями. Она относительно недавно пришла в CSS, после «flexbox», но уже обзавелась армией своих последователей. Используя Grid CSS, можно достаточно быстро создавать адаптивные сайты, которые будут одинаково хорошо смотреться на экранах разных размеров.
Другое
