Учебник по CSS Grid

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

Сетки. Цифровая граница. Я попытался изобразить скопления информации, перемещающиеся через компьютер. Как они выглядели? Корабли? Мотоциклы? Были ли цепи похожи на автострады? Я продолжал мечтать о мире, который думал, что никогда не увижу. И вот однажды ... Я вошел. - Трон: Наследие

Введение в CSS Grid

CSS Grid - это принципиально новый подход к созданию макетов с использованием CSS.

Следите заСтраница CSS Grid Layout на caniuse.comчтобы узнать, какие браузеры в настоящее время его поддерживают. На момент написания, апрель 2019 года, все основные браузеры (кроме IE, который никогда не будет поддерживать его) уже поддерживают эту технологию, охватывая 92% всех пользователей.

CSS Grid не является конкурентомFlexbox. Они взаимодействуют и совместно работают над сложными макетами, потому что CSS Grid работает с двумя измерениями (строки И столбцы), а Flexbox работает с одним измерением (строки ИЛИ столбцы).

Создание макетов для Интернета традиционно было сложной темой.

Я не буду вдаваться в подробности этой сложности, что само по себе является сложной темой, но вы можете считать себя очень удачливым человеком, потому что в наши днив вашем распоряжении 2 очень мощных и хорошо поддерживаемых инструмента:

  • CSS Flexbox
  • CSS-сетка

Это два инструмента для создания веб-макетов будущего.

Если вам не нужно поддерживать старые браузеры, такие как IE8 и IE9, нет причин возиться с такими вещами, как:

  • Макеты таблиц
  • Поплавки
  • clearfix хаки
  • display: tableхаки

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

Основы

Макет CSS Grid активируется на элементе контейнера (который может бытьdivили любой другой тег), установивdisplay: grid.

Как и в случае с flexbox, вы можете определить некоторые свойства для контейнера и некоторые свойства для каждого отдельного элемента в сетке.

Сочетание этих свойств определит окончательный вид сетки.

Самые основные свойства контейнера:grid-template-columnsиgrid-template-rows.

столбцы-шаблон-сетки и строки-шаблона-сетки

Эти свойства определяют количество столбцов и строк в сетке, а также устанавливают ширину каждого столбца / строки.

Следующий фрагмент определяет сетку с 4 столбцами шириной 200 пикселей каждый и 2 строками высотой 300 пикселей каждая.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}

A grid with 4 columns and 2 rows

Вот еще один пример сетки с 2 столбцами и 2 строками:

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
}

A grid with 2 columns and 2 rows

Автоматические размеры

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

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
}

Различные размеры столбцов и строк

В приведенных выше примерах мы сделали красивые регулярные сетки, используя одинаковые значения для строк и одинаковые значения для столбцов.

Вы можете указать любое значение для каждой строки / столбца, чтобы создать множество различных дизайнов:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
}

A grid with varying columns and rows dimensions

Другой пример:

.container {
  display: grid;
  grid-template-columns: 10px 100px;
  grid-template-rows: 100px 10px;
}

A grid with varying columns and rows dimensions

Добавление пространства между ячейками

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

Вы можете добавить интервал, используя эти свойства:

  • grid-column-gap
  • grid-row-gap

или сокращенный синтаксисgrid-gap.

Пример:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

A grid with gap between rows and columns

Тот же макет с сокращением:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-gap: 25px;
}

Создание элементов в нескольких столбцах и / или строках

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

Вот свойства, которые мы будем использовать для этого:

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

Пример:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-column-start: 3;
  grid-column-end: 5;
}

Editing the dimensions of some cells

Цифры соответствуют вертикальной линии, разделяющей каждый столбец, начиная с 1:

The numbers correspond to the vertical line that separates each column

Тот же принцип применяется кgrid-row-startиgrid-row-endза исключением того, что на этот раз вместо большего количества столбцов ячейка занимает больше строк.

Сокращенный синтаксис

Эти свойства имеют сокращенный синтаксис, предоставляемый:

  • grid-column
  • grid-row

Использование простое, вот как воспроизвести макет выше:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / 4;
}
.item6 {
  grid-column: 3 / 5;
}

С помощьюgrid-areaкак стенография

Вgrid-areaсвойство может использоваться как сокращение дляgrid-columnиgrid-rowсокращения, когда вам нужно применить оба к одному элементу. Вместо того, чтобы иметь:

.item1 {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
}

Вы можете использовать

.item1 {
  grid-area: 1 / 3 / 4 / 5;
}

(начало строки сетки / начало столбца сетки / конец строки сетки / конец столбца сетки)

С помощьюspan

Другой подход - установить начальный столбец / строку и установить, сколько они должны занимать, используяspan:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / span 2;
}
.item6 {
  grid-column: 3 / span 2;
}

spanработает также с несокращенным синтаксисом:

.item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

и вы также можете использовать свойство start. В этом случае конечная позиция будет использоваться как ссылка, аspanбудет считать «назад»:

.item1 {
  grid-column-start: span 2;
  grid-column-end: 3;
}

Дополнительная конфигурация сетки

Использование дробей

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

Дробь - это единица измерения пространства.

В следующем примере сетка делится на 3 столбца одинаковой ширины.13доступного пространства каждый.

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

Использование процентов и rem

Вы также можете использовать проценты, а также смешивать и сопоставлять дроби, пиксели, остатки и проценты:

.container {
  grid-template-columns: 3rem 15% 1fr 2fr
}

С помощьюrepeat()

repeat()- это специальная функция, которая принимает число, указывающее, сколько раз будет повторяться строка / столбец, и длина каждого из них.

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

.container {
  grid-template-columns: repeat(4, 100px);
}

Это создает 4 столбца одинаковой ширины.

Или используя дроби:

.container {
  grid-template-columns: repeat(4, 1fr);
}

Укажите минимальную ширину строки

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

Вот пример, где на боковой панели14экрана и никогда не занимает меньше 200 пикселей:

.container {
  grid-template-columns: minmax(200px, 3fr) 9fr;
}

Вы также можете установить максимальное значение, используяautoключевое слово:

.container {
  grid-template-columns: minmax(auto, 50%) 9fr;
}

или просто минимальное значение:

.container {
  grid-template-columns: minmax(100px, auto) 9fr;
}

Размещение элементов с помощьюgrid-template-areas

По умолчанию элементы располагаются в сетке в соответствии с их порядком в структуре HTML.

С помощьюgrid-template-areasВы можете определить области шаблона, чтобы перемещать их по сетке, а также создавать элемент в нескольких строках / столбцах вместо использованияgrid-column.

Вот пример:

<div class="container">
  <main>
    ...
  </main>
  <aside>
    ...
  </aside>
  <header>
    ...
  </header>
  <footer>
    ...
  </footer>
</div>
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

Несмотря на их первоначальный порядок, предметы размещаются там, гдеgrid-template-areasопределить, в зависимости отgrid-areaсвязанное с ними имущество.

Добавление пустых ячеек в области шаблона

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

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    ". header header ."
    "sidebar . main main"
    ". footer footer .";
}

Заполните страницу сеткой

Вы можете расширить сетку, чтобы заполнить страницу, используяfr:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

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

Layout example

Вот разметка:

<div class="wrapper">
  <header>Header</header>
  <article>
    <h1>Welcome</h1>
    <p>Hi!</p>
  </article>
  <aside><ul><li>Sidebar</li></ul></aside>
  <footer>Footer</footer>
</div>

а вот CSS:

header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
}
article {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
}
aside {
  grid-area: sidebar;
  background-color: #45aaf2;
}
footer {
  padding: 20px;
  grid-area: footer;
  background-color: #fd9644;
}
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

Я добавил несколько цветов, чтобы сделать его красивее, но в основном он присваивает каждому тегуgrid-areaимя, которое используется вgrid-template-areasсобственность в.wrapper.

Когда макет меньше, мы можем разместить боковую панель под контентом с помощью медиа-запроса:

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

Смотрите на CodePen

См. ПероПример CSS Grid с боковой панельюАвтор: Флавио Коупс (@flaviocopes) наCodePen.

Tech Wiki Online!