Другое

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

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

Summit: суперкомпьютер, побивший рекорд и ставший самым мощным в мире в 2019 году
Другое

Summit: суперкомпьютер, побивший рекорд и ставший самым мощным в мире в 2019 году

Другое

Что такое dwm.exe и для чего он? Диспетчер окон рабочего стола

Другое

Файл NMEA – чем открыть, описание формата. Советы по открытию

Другое

Искусственный интеллект Майкрософт: какие у него возможности?