Css grid руководство: Полное визуальное руководство/шпаргалка по CSS Grid / Хабр

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

Шпаргалка по 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>Здесь будет содержание «шапки сайта»</header>

  <article>Здесь будет основной контент сайта</article>

  <nav>Это будет левый сайдбар с меню и виджетами</nav>

  <div>Это будет правый сайдбар с виджетами рекламы</div>

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

Все про grid. Наиболее полное руководство по css grid.

Все про grid. Наиболее полное руководство по css grid.

Здравствуйте! В этой статье я хотел бы обобщить все те свойства grid  layout,  которые были рассмотрены в предыдущих уроках по верстки на  grid.  Система grid  позволяет задавать направление элементам на странице сразу в 2-х направлениях в отличие от того же Flexboxa где можно задавать только в одном направлении.

Терминология CSS Grid

Прежде чем мы  начнем разбираться со свойствами Grid layput давайте познакомимся с некоторыми терминами  верстки на гридах.

Контейнер сетки

Контейнер представляет из себя родительский элемент к которому применено свойство display: grid.  Например:

  <div>
    <div>Item1</div>
    <div>Item2</div>
    <div>Item3</div>
</div>

В примере в качестве контейнера используется div с классом container.

Элемент сетки

Каждый вложенный элемент в родительский является элементом сетки. Например:

  <div>
    <div>Item1</div>
    <div>Item2</div>
    <div>Item3</div>
</div>

В примере каждый div с классом item будет являться элементом сетки.

Линии сетки

Это разделительные  линии которые проведены между всеми элементами в сетке. Они могут быть как горизонтальные так и вертикальные.

Трек сетки

Представляет из себя некое пространство между двумя линиями сетки.

Ячейка грида или сетки

Это пространство между двумя соседними клетками в сетке.

Область сетки.

Эта область ограниченная  4-мя линиями в сетке грид.

Итак с основными определениями грида вроде разобрались теперь перейдем непосредственно к свойствам элементов.  эти свойства разделяются на свойства родительских элементов и свойства дочерних элементов. Давайте будем разбираться по порядку.

Содержание

Свойства для контейнера

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

Свойства для  дочерних элементов

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

Свойства для родительского элемента сетки (контейнера).

display

Задает сетку для родительского элемента. Принимает следующие значения:

• grid — формирует сетку как грид
• inline-grid — делает инлайновую сетку на практике  это свойство редко применяется
• subgrid — используется в том случае если ваш элемент также является и вложенным элементом в другой сетки, то при задании этого свойства размеры будут взяты у родительского элемента а не буду определять собственный.

.cont {
  display: grid | inline-grid | subgrid;
}

И особенно хочется отметить, что  в гридах не будут работать свойства float, clear, vertical-align.

grid-template-columns grid-template-rows

Собственно задают строки и столбцы сетки, то есть определяют размер сетки.  Можно задавать как фиксированные значения в px, % так и  в относительных единицах, определяющих количество свободного пространства в сетки — fr. Также можно для удобства именовать линии сетки.

.container{
  grid-template-columns: 20px 40px auto 50px 40px;
  grid-template-rows: 35% 200px auto;
}

А вот пример с именованными линиями грид.

  .container {
  grid-template-columns: [first1] 20px [line2] 40px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start1] 25% [row1-end1] 100px [third-line] auto [last-line];
}

Да кстати повторяющиеся части вы всегда сможете заменить с помощью функции repeat().

  .container {
  grid-template-columns: repeat(3, 40px [col-start]) 5%;
}

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

.cont {
  grid-template-columns: 1fr 1fr 1fr;
}

grid-template-areas

Позволяет для вашего шаблона задать именованные области, которые описаны для дочерних элементов с помощью свойства grid-area.  Значения:

• name — имя области
• . — точка означает что ячейка пустая
• none — область не задана

  .container {
  grid-template-areas: 
    "name | . | none | ..."
    "...";
}

Пример:

.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: main;
}
. item-3 {
  grid-area: sidebar;
}
.item-4 {
  grid-area: footer;
}

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Пример создаст сетку из 4 колонок и 3 строк.  1-я строка будет состоять из области header, во 2-й строке будут 2 ячейки main, пустая ячейка и ячейка sidebar и 3-я строка будет полностью состоять из footer.

У каждой строки должно быть одинаковое количество ячеек.

grid-template

Представляет собой  сокращенное свойство от свойств grid-template-rows, grid-template-columns, grid-template-areas.   Значения:

• none  — установит все 3 свойства в их начальное значение
• subgrid — установит grid-template-rows и grid-template-columns в subgrid,  а grid-template-areas в начальное значение.
• grid-template-rows/grid-template-columns —  задает значения для строк и столбцов сетки грид соответственно

.container {
  grid-template:
    [row1-start] 35px "header header header" [row1-end]
    [row2-start] "footer footer footer" 35px [row2-end]
    / auto 50px auto;
}

grid-column-gap grid-row-gap

Задает отступы между элементами в сетке.  Значения:

• size — размер отступа для элементов.

.container {
  grid-template-columns: 200px 50px 100px;
  grid-template-rows: 60px auto 80px; 
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

Следует заметить, что отступы задаются только между колонками и строками, но не задаются для внешних краев элементов сетки.

grid-gap

Сокращенное свойство для grid-column-gap  и grid-row-gap.   Пример:

.container{
  grid-template-columns: 120px 100px 100px;
  grid-template-rows: 70px auto 70px; 
  grid-gap: 20px 10px;
}

Если не задать значение для grid-row-gap, то ему присваивается такое же значение как и для grid-column-gap.

justify-items

Это свойство выравнивает содержимое вдоль оси строки то есть по горизонтали. Значения:

• start — выравнивает содержимое по левому краю
• end — выравнивает содержимое по правому краю
• center — выравнивает содержимое по середине
• stretch — растягивает элементы равномерно

Примеры:

.cont {
  justify-items: start;
}

.cont {
  justify-items: stretch;
}

align-items

Выравнивает содержимое элементов по оси столбцов или по вертикальной оси. Значения:

• start — выравнивает содержимое по верхнему краю
• end — выравнивает содержимое по нижнему краю
• center — выравнивает содержимое по середине
• stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

Примеры:

. cont {
  align-items: start;
}

.cont {
  align-items: stretch;
}

justify-content

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

• start —  выравнивает сетку по левой стороне  контейнера
• end — выравнивает  сетку оп правой стороне контейнера
• center — выравнивает сетку по  центру контейнера
• stretch —  элементы заполняют всю ширину кониейнера
• space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
• space-between — задает одинаковое расстояние между элементами без отступов по краям
• space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям

Примеры:

  . cont {
  justify-content: start;
}

.cont {
  justify-content: space-evenly;    
}

align-content

Выравнивает сетку вдоль оси столбца в  случае если размер сетки больше размера контейнера, такое может произойти при установки размеров элементам в  пикселах, то есть  если вы задаете фиксированные размеры для элемента.  Значения:

• start —  выравнивает сетку по верхней стороне  контейнера
• end — выравнивает  сетку оп нижней стороне контейнера
• center — выравнивает сетку по  центру контейнера
• stretch —  элементы заполняют всю ширину кониейнера
• space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
• space-between — задает одинаковое расстояние между элементами без отступов по краям
• space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям

Примеры:

. cont{
  align-content: start; 
}

.cont {
  align-content: space-evenly;  
}

grid-auto-columns  grid-auto-rows

Определяет размер созданных элементов, в том случае если они создаются не явно.  Значения:

• size — размер элементов в любой доступной едеинице измерения

Чтобы понять как работают эти свойства давайте рассмотрим сетку 2х2.

А теперь представте, что мы с помощью свойств grid-column и grid-row позиционируем элементы следующим образом:

.item-1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-2 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

То есть мы указываем элементу .item-2 чтобы он начинался на 5 линии и заканчивался на 6. Поскольку мы ссылаемся на несуществующие линии, то создаются так называемые неявные треки, чтобы заполнить собой  пространство. Вот для задания ширины этим трекам и используются свойства grid-auto-columns и grid-auto-rows.

.cont {
  grid-auto-columns: 80px;
}

grid-auto-flow

Когда у вас есть  элементы в сетке которые вы явным образом не позиционируете явным образом в сетке. Для размещения этих элементов запускается алгоритм авторазмещения, чтобы их разместить. Значения:

• row — строки заполняются поочередно. Новые строки  добавляются при необходимости
• column — столбцв заполняются поочередно. Новые столбцы добавляются в случае необходимости
• dense — пустые пространства в  сетке заполняются в случае появления более мелких элементов позже

Примеры:

Пусть есть такой HTML:

 
     <div>
    <div>item-a</div>
    <div>item-b</div>
    <div>item-c</div>
    <div>item-d</div>
    <div>item-e</div>
</div>

Определим для них сетку с 5 столбцами и 2 строками. Свойство grid-auto-flow установим в row.

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 20px 20px;
  grid-auto-flow: row;
}

И укажем размещения в сетке только для двух элементов.

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

В результате получим такую сетку

Если установить grid-auto-flow в значение column, то получим уже такую сетку.

 .container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 20px 20px;
  grid-auto-flow: column;
}

grid

Сокращенное свойство для всех вышеописанных свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow.  Это свойство также задает  grid-column-gap и grid-row-gap на их значения по умолчанию. Значения:

• none —  задает всем свойствам их значения по умолчанию
• grid-template-rows / grid-template-columns — задает  соотвественно значения для grid-template-rows и grid-template-columns.
• <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]  — задает значения для свойств  grid-auto-flow, grid-auto-rows и grid-auto-columns соответственно.

Примеры:

.cont{
  grid: 200px auto / 1fr auto 1fr;
}

Свойства дочерних элементов

grid-column-start grid-column-end grid-row-start grid-row-end

Определяют  местоаоложение элемента в сетке grid-column-start/grid-row-start это линия с которой элемент будет начинаться, а grid-column-end/grid-row-end это линия на которой элемент будет заканчиваться.  Значения:

• line —  может быть любым числом, которое ссылается на прономерованную линию
• span число — элемент, который будет распространяться на  некоторое количество ячеек
• spаn имя — элемент будет распространяться до линии с указанным именем
• auto — задает автоматическое расположение элементов

Примеры:

. item-1 {
  grid-column-start: 1;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

grid-column grid-row

Сокращенное свойство для grid-column-start + grid-column-end, и grid-row-start + grid-row-end.   Значения:

• start/end — значения где начинается элемент и где он заканчивается

Примеры:

.item-3 {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

Небольшая поправка если не указывать значение конечной линии, то элемент будет занимать одну ячейку по умолчанию.

grid-area

Задает название элементу, чтобы можно было на него сослаться с помощью свойства grid-template-areas. Значения:

• name — задает имя для элемента
• <row-start> / <column-start> / <row-end> / <column-end> — можно задавать нумерацию и название линий

Примеры:

.item-4 {
  grid-area: 1 / col4-start / last-line / 6
}

justify-self

Позволяет выравнивать содержимое элемента вдоль оси строки.   Применяется непосредственно к содержимому элемента.  Значения:

• start — выравнивает содержимое по левому краю
• end — выравнивает содержимое по правому краю
• center — выравнивает содержимое по середине
• stretch — растягивает элементы равномерно

Примеры:

  .item-1 {
  justify-self: start;
}

.item-1 {
  justify-self: stretch;
}

align-self

Позволяет выровнить элемент вдоль столбца. Выравнивается содержимое элемента. Значения

• start — выравнивает содержимое по верхнему краю
• end — выравнивает содержимое по нижнему краю
• center — выравнивает содержимое по середине
• stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

Примеры:

. item-1 {
  align-self: start;
}

.item-1{
  align-self: stretch;
}

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

(Visited 383 times, 1 visits today)

CSS Grid Layout

❮ Назад Следующий ❯

Основной

Правый

Попробуй сам »

Grid Layout

Модуль CSS Grid Layout предлагает систему компоновки на основе сетки со строками и столбцы, что упрощает разработку веб-страниц без использования плавающих элементов и позиционирование.

Поддержка браузера

Свойства сетки поддерживаются во всех современных браузерах.

Элементы сетки

Макет сетки состоит из родительского элемента с одним или несколькими дочерними элементами.

Пример

<дел >