Другое

Grid CSS: определение, руководство со шпаргалками и примеры

Lorem ipsum dolor

Шпаргалка по CSS Grid будет полезна для тех, кто только начинает использовать эту технологию при верстке сайтов. В сегодняшней статье мы подробно разберем эту технологию, чтобы по ее использованию не возникало больше вопросов. Поэтому наша статья — это и есть та самая «шпаргалка по CSS Grid».

CSS Grid — это технология двухмерного макетирования верстки. При ее использовании макет веб-страницы разбивается на «столбики» и «строчки». Таким образом образуется табличное представление сайта со множеством ячеек. В каждой «ячейке» можно располагать какой-то контент, а самими ячейками можно гибко управлять. Например, можно изменять их размерность или местоположение, используя для этого специальные CSS-свойства. 

CSS Grid

Технология CSS Grid поддерживается всеми современными обозревателями интернета, поэтому не нужно бояться использовать ее в своей разработке. По сути, «грид» разделяет веб-страницу набором горизонтальных вертикальных линий, которые и образуют «сетку» с ячейками. Веб-разработчик может воздействовать и на «линии» сетки, и на образовавшиеся ячейки.

Изучая CSS Grid, веб-разработчик сталкивается со следующими определениями:

  1. Линии сетки. Это основной и невидимый компонент CSS Grid, который образовывает «сетчатые» веб-страницы. На эти компоненты можно ссылаться и воздействовать на их состояние, так как они задаются с индивидуальным числовым индексом. Известны два вида линий: горизонтальные, которые образуют строчки сетки, и вертикальные, которые образуют столбики сетки.

  2. Дорожки сетки. Область между двумя параллельными линиями образует дорожку сетки. Дорожки также могут быть горизонтальными и вертикальными. Длина дорожки зависит от контейнера, в котором объявлена технология CSS Grid. Ведь при помощи «грид» можно сделать общий макет сайта с «хедером», «телом сайта» и «футером». Но также можно сделать отдельный блок, например, блок с фотографиями или статьями.

  3. Ячейка сетки. Когда две параллельные линии пересекаются с другими двумя параллельными линиями, тогда на своем пересечении они образуют ячейку. Ячейка является местом, где можно разместить какой-то контент веб-сайта.

  4. Область сетки. Область сетки — это условная величина. Она может состоять из всех ячеек сетки. Но также может состоять из нескольких ячеек сетки или даже из одной единственной ячейки. Такую область веб-разработчик создает самостоятельно.

  5. Элемент сетки. Все, что составляет сетку, является ее элементом, начиная от ячейки и линий и заканчивая контентом внутри сетчатого контейнера.

Компоненты CSS Grid

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

Объявить контейнер-сетку можно двумя CSS-свойствами:

  1. «display: grid». Это свойство генерирует сетчатый контейнер уровня отдельного блока на всю ширину веб-страницы.

  2.  «display: inline-grid». Это свойство генерирует встроенный блок уровня строки.

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

Для того чтобы сформировать внутри контейнера сетку, используются следующие CSS-свойства:

  1. «grid-template-rows». Определяет количество строк.

  2. «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, можно достаточно быстро создавать адаптивные сайты, которые будут одинаково хорошо смотреться на экранах разных размеров.

Схожие статьи

Основы системного администрирования: что нужно знать сисадмину?
Другое

Основы системного администрирования: что нужно знать сисадмину?

Календарь Thunderbird 60. Как его настроить и добавить в трей
Другое

Календарь Thunderbird 60. Как его настроить и добавить в трей

Другое

Как научиться делегировать обязанности подчиненным: реальные примеры

Разработка ПО и стадии жизненного цикла программного обеспечения
Другое

Разработка ПО и стадии жизненного цикла программного обеспечения