Abr@X@bra.ru
Часть 1. Делаем сетку на CSS Grid
Часть 1. Делаем сетку на CSS Grid

Часть 1. Делаем сетку на CSS Grid

19.10.2017
248

CSS Grid Layout полностью меняет игру для веб-дизайна. Это позволяет нам создавать сложные макеты с помощью CSS.

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

Давайте начнем.

Прежде чем погрузиться в концепции CSS Grid, давайте рассмотрим некоторые основные термины.

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

Grid lines

Вертикальные и горизонтальные линии, разделяющие сетку, столбцы и строки.


Grid cell

Один блок сетки


Grid area

Прямоугольное пространство, окруженное четырьмя линиями сетки. Область сетки может содержать любое количество ячеек.


Grid track

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


Grid row

Горизонтальная строка.


Grid column

Вертикальная колонка.


Gutter

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


Grid container

Контейнер для вызова сетки CSS grid. Принимает два параметра:

display: grid
display: inline-grid

Grid item

Любой элемент, являющийся прямым дочерним элементом для grid container.

Если вы только, что начали разбираться и изучать как устроена сетка Css grid, все очень может показаться довольно сложным и непонятным. После того как мы перейдем к практике, все станет понятно.

Давайте перейдем к созданию нашей первой сетки с помощью CSS Grid Layout.

Создаем сетку Css grid

Первое, что мы хотим сделать, это создать контейнер сетки (Grid container). Мы можем сделать это, объявив display: grid для элемента контейнера. В этом примере мы используем div с классом container.

Определение строк и столбцов

Существует несколько способов определения строк и столбцов. Для нашей первой сетки мы будем использовать свойства grid-template-columns и grid-template-rows. Эти свойства позволяют определить размер строк и столбцов для нашей сетки.

Первые две строки будут иметь фиксированную высоту 150 px, а столбцы фиксированную ширину 150 px, для этой реализации нужно написать:

grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
Давайте попробуем добавить еще один столбец шириной 70 px, для этого нужно написать:
grid-template-columns: 150px 150px 150px 70px;
и так можно написать сколько угодно столбцов, разной ширины, просто добавляя новые значения.

Добавим gutter

Добавление gutter в вашу сетку удивительно легко с помощью CSS Grid. Просто добавьте:

grid-gap: 1rem;

Эта простая строка кода дает вам равномерный отступ (gutter) между всеми строками и столбцами. Чтобы определить размер gutter для столбцов и строк отдельно, вы можете вместо этого использовать свойства grid-column-gap и grid-row-gap.

Вот полный пример кода HTML:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
Имея всего несколько строк CSS, мы можем создать простую сетку:
.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}
Демо сетки:


Значение fr

Создание сетки с фиксированной шириной (px), это хорошо, но она не очень гибкая. К счастью, CSS Grid представляет новую единицу длины, называемую fr, что является сокращением для фракции. MDN определяет блок fr как единицу, которая представляет собой долю доступного пространства в контейнере сетки. Если мы хотим переписать нашу предыдущую сетку на три столбца с равной шириной которую будет определять единица fr, нам нужно изменить наш код Css:

.container {
  display: grid;
  width: 800px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}

Функция repeat()

Данную функцию очень удобно использовать: если вы повторяете единицы длины, используйте нотацию repeat (). Перепишите вышеприведенный код так:

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
  grid-gap: 1rem;
}
Вот результат:



При объявлении размеров вы можете использовать фиксированные размеры с такими единицами, как px и em. Вы также можете использовать гибкие размеры, такие как проценты или единица fr. Однако реальная магия CSS Grid Layout - это способность смешать эти единицы. Пример:

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 100px 30% 1fr;
  grid-template-rows: 200px 100px;
  grid-gap: 1rem;
}

Здесь мы объявили сетку с тремя столбцами. Первый столбец имеет фиксированную ширину 100 px. Второй столбец будет занимать 30% доступного пространства, а третий столбец - 1fr, что означает, что он займет часть доступного пространства (1/1).

Вот результат:



Это была часть 1 по работе с Css grid. В части 2, мы рассмотрим как можно размещать элементы в сетки.





CSS Grid, CSS
Читайте также:
CSS Grid идеально подходит для адаптивной верстки

CSS Grid идеально подходит для адаптивной верстки

Я думаю, что вы уже в курсе, что Grid превосходит Flexbox для создание макетов. Но как насчет адаптивных макетов? Что лу...
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
Flexbox и как делать адаптивные сайты

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать