PF pavelfilippov.ru

Справошная ★ Поиск

CSS Grid: база

CSS

Flexbox великолепен, но его основная цель — помочь нам с позиционированием элементов в одном измерении, горизонтальном или вертикальном. Для двумерного макета всей страницы мы в основном полагались на такие фреймворки, как Bootstrap или Foundation, которые предоставляют нам классы, которые мы можем использовать для создания макета сетки. Новый модуль CSS Grid Layout , который скоро будет доступен в браузерах, должен все изменить.

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

  • Как и в случае с Flexbox, исходный порядок не имеет значения для CSS Grid, и элементы можно легко перемещать в зависимости от размера окна просмотра.
  • Вы можете начать использовать макет сетки прямо сейчас и использовать обнаружение функций с помощью @supports так что он применяется только в поддерживающих браузерах.
  • Некоторые макеты, которые невозможно выполнить даже с помощью системы сеток современных фреймворков CSS, будут возможны с помощью CSS Grid.

Словарь

Несколько понятий представлены в CSS Grid, и неплохо было бы ознакомиться со словарем:

  • Линия сетки : элементы располагаются в сетке с линиями, где элемент начинается и заканчивается, поэтому линии сетки играют центральную роль в работе CSS Grid. Линии сетки столбцов нумеруются слева направо, начиная с 1, а линии сетки строк нумеруются сверху вниз, начиная с 1.

Линия строки сетки 2

Линия сетки

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

Сетка дорожки

Сетка дорожки

  • Область сетки : область, определяемая любыми 4 линиями сетки.

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

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

  • Ячейка сетки : пространство между двумя последовательными линиями сетки столбца и строки. Наименьшая единица, возможная в сетке.

Ячейка сетки

Ячейка сетки

Отображение: сетка на родительском элементе

Немного похоже на flexbox, сетка организована с элементом контейнера и дочерними элементами, которые становятся элементами сетки. Вы просто устанавливаете display: grid; на контейнерном элементе. Строки и столбцы сетки определяются с помощью grid-template-columns и grid-template-rows.

Начнем со следующей разметки:

 

<div class="container">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
  <div class="box box-5">Box 5</div>
  <div class="box box-6">Box 6</div>
  <div class="box box-7">Box 7</div>
</div>

 

Вот как мы можем определить CSS для контейнера:

 

.container {
  display: grid;
  grid-template-columns: 150px 150px 80px;
  grid-template-rows: 100px auto;
  grid-gap: 10px 15px;
}

 

При этом мы уже получаем кое-что интересное, даже не задавая никаких свойств элементам сетки:

Пример сетки CSS 1

Обратите внимание, как мы добавили 10 пикселей по горизонтали и 15 пикселей по вертикали между ячейками, используя grid-gap.

Теперь мы можем пойти дальше, определив начальную и конечную линии конкретных элементов. Элементы, которые явно не размещены в сетке, будут размещены в соответствии с алгоритмом. Мы используем grid-column-start grid-column-end grid-row-start grid-row-end чтобы определить, где элемент начинается и заканчивается в сетке:

 

.box-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
.box-3 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

 

Или мы можем использовать grid-column и grid-row сокращение для того же результата:

 

.box-1 {
  grid-column: 1 / 3;
}
.box-3 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

 

Вот результирующая сетка:

Пример сетки CSS 2

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

CSS Grid Layout сегодня

К сожалению, Grid Layout по-прежнему недоступен. Вот текущая доступность:

  • Поддерживается по умолчанию в Firefox, начиная с версии 52.
  • Полностью поддерживается в последних версиях Chrome и Opera.
  • Поддерживается в IE и Edge, но с более старым синтаксисом.
  • Доступно в последней предварительной версии Safari Technology.

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

Апдейт: в 2020 уже все браузеры поддерживают Grid

Включить в Chrome

Чтобы включить CSS Grid в Chrome, перейдите chrome://flags/, найдите функции экспериментальной веб-платформы и включите их.

Включить в Firefox

Макет сетки теперь поддерживается по умолчанию в Firefox 52 и выше.

Связанные ссылки