Полное руководство по сетке онлайн урок.


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

Эта статья была перенесена из руководства Криса Хауса , самого Криса, который сохраняет оба последних.

Введение

Макет сетки CSS (он же «Грид») представляет собой двумерную систему компоновки на основе сетки, цель которой состоит не в том, чтобы полностью изменить способ проектирования пользовательских интерфейсов на основе сетки. CSS всегда использовался, чтобы выкладывать наши веб-страницы, но это никогда не было очень удачным. Во-первых, мы использовали таблицы, затем плавающие позиции, позиционирование и встроенный блок, но все эти методы были в основном хаками и оставили много важных функций (например, вертикальное центрирование). Flexbox помог, но он предназначен для более простых одномерных макетов, а не сложных двумерных (Flexbox и Grid на самом деле работают очень хорошо вместе). Grid - это самый первый CSS-модуль, созданный специально для решения проблем макета, которые мы все взламывали до тех пор, пока мы создаем веб-сайты.

Есть две основные вещи, которые вдохновили меня на создание этого руководства. Первая - потрясающая книга Рэйчел Эндрю Подготовьтесь к компоновке сетки CSS. Это подробное, ясное введение в грид и является основой всей этой статьи. Ясильнорекомендую вам купить его и прочитать. Мое другое большое вдохновение - это Полное руководство по Flexbox Криса Койера, которое стало моим ресурсом для всего flexbox. Это помогло тонне людей, о чем свидетельствует тот факт, что это лучший результат, когда вы используете Google flexbox. Вы заметите много общего между своим сообщением и моим, потому что почему бы не украсть из лучших?

Мое намерение с этим руководством состоит в том, чтобы представить концепции Grid, как они существуют в самой последней версии спецификации. Поэтому я не буду освещать устаревший синтаксис IE, и я сделаю все возможное, чтобы регулярно обновлять это руководство, когда спецификация созревает.

Основы и поддержка браузера

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

По состоянию на март 2017 года большинство браузеров поставляли встроенную поддержку без поддержки CSS Grid: Chrome (в том числе на Android), Firefox, Safari (в том числе на iOS) и Opera. Internet Explorer 10 и 11, с другой стороны, поддерживают его, но это старая реализация с устаревшим синтаксисом. Теперь время строить с сеткой!

Эти данные поддержки браузера - от Caniuse , который имеет более подробную информацию. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

44
57
52

11
16
iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox

62

<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>

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

Дети (например,прямыепотомки) контейнера сетки. Здесь элементыявляются элементами сетки, ноподпунктне является.

<div class="container">
<div class="item"></div>
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>

# Grid Line

Линии разделения, которые составляют структуру сетки. Они могут быть либо вертикальными («линии сетки столбцов»), либо горизонтальными («строки сетки строк») и располагаться по обе стороны от строки или столбца. Здесь желтая линия является примером строки сетки столбцов.

Grid line

# Grid Track

Пространство между двумя соседними линиями сетки. Вы можете думать о них как о столбцах или строках сетки. Вот трек сетки между строками сетки второй и третьей строки.

Grid track

# Сетка сетки

Пространство между двумя соседними строками строки строки и двумя соседними столбцами. Это единственная «единица» сетки. Вот ячейка сетки между линиями 1 и 2 сетки строк и строками сетки 2 и 3.

Grid cell

#Площадь сетки

Общее пространство, окруженное четырьмя линиями сетки. Область сетки может состоять из любого количества ячеек сетки. Вот область сетки между линиями 1 и 3 сетки строк и строки 1 и 3 сетки столбца.

Grid area

Свойства сетки Содержание

Свойства контейнера гридов

  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-column-gap
  • grid-row-gap
  • сетка-пробел
  • оправдательные элементы
  • выравнивающие элементы
  • выравнивание-содержание
  • выравнивание-содержание
  • сетка-авто-столбцы
  • grid- auto-rows
  • grid-auto-flow
  • сетка
Свойства для элементов сетки

    grid-column-start
  • grid-column-end
  • grid-row-start
  • сетка-строка-конец
  • сетка-столбец
  • сетка-строка
  • сетка
  • justify-self
  • align-self
Свойства для родителя

(сетчатый контейнер)

#

display Определяет элемент как контейнер сетки и устанавливает новый контекст

для форматирования

для его содержимого.Значения:

    сетка
  • - генерирует сетку уровня блока
  • встроенная сетка
  • - генерирует сетку встроенного уровня
  • subgrid
  • - если ваш контейнер сетки сам является элементом сетки (т. Е. Вложенными сетками), вы можете использовать это свойство, чтобы указать, что вы хотите, чтобы размеры столбцов его строк были взяты из родительского объекта, а не указали его собственный.
.container {
display: grid | inline-grid | subgrid;
}

Примечание:столбец,float,clearиvertical-alignне влияют на контейнер сетки.

# grid-template-columns
grid-template-rows

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

Значения:

  • & lt; track-size & gt;- может быть длиной, процентом или долей свободного места в сетке (с использованием блока fr )
  • & lt; имя-линии & gt;- произвольное имя по вашему выбору
.container {
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

Примеры:

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

.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}

Grid with auto named lines

Но вы можете явно указать строки. Обратите внимание на синтаксис командной строки для имен строк:

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

Grid with user named lines

Обратите внимание, что строка может содержать более одного имени. Например, здесь вторая строка будет иметь два имени: row1-end и row2-start:

.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Если ваше определение содержит повторяющиеся части, вы можете использовать нотациюrepeat ()для упорядочения:

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

Что эквивалентно этому:

.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

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

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

Свободное пространство вычисляетсяпослелюбых негибких элементов. В этом примере общая сумма свободного пространства, доступного дляfrединиц, не включает 50px:

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

# grid-template-areas

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

Значения:

  • & lt; grid-area-name & gt;- имя области сетки, заданной сеткой
  • .- период обозначает пустую ячейку сетки
  • none- не определены области сетки
.container {
grid-template-areas:
"<grid-area-name> | . | none | ..."
"...";
}

Пример:

.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}

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

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

Example of grid-template-areas

Каждая строка в декларации должна иметь одинаковое количество ячеек.

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

Обратите внимание, что вы не называете строки синтаксисом, просто областями. Когда вы используете этот синтаксис, строки на обоих концах областей фактически получают имена автоматически. Если имя вашей области сеткиfoo, имя начальной строки строки и начальная строка столбца будетfoo-start, а имя последней строки строки и последней строки столбца будетfoo-end. Это означает, что некоторые строки могут иметь несколько имен, таких как крайняя левая строка в приведенном выше примере, которая будет иметь три имени: заголовок, начало и начало нижнего колонтитула.

# grid-template

Сокращение для установки grid-template-rows , grid-template-columns и grid-template-areas в одном объявлении,

Значения:

.container {
grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

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

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

Это эквивалентно этому:

.container {
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}

Посколькуgrid-templateне сбрасываетнеявныесвойства сетки ( grid-auto-columns , grid-auto-rows и grid-auto-flow ), что вероятно, то, что вы хотите сделать в большинстве случаев, рекомендуется использовать grid вместоgrid-template.

# grid-column-gap
grid-row-gap

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

Значения:

  • & lt; line-size & gt;- значение длины
.container {
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}

Пример:

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

Example of grid-column-gap and grid-row-gap

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

# сетка-пробел

Сокращенное обозначение сетки-пробел и разделитель столбцов

Значения:

  • & lt; grid-row-gap & gt; & Lt; сетка-колонки зазор & GT;- значения длины
.container {
grid-gap: <grid-row-gap> <grid-column-gap>;
}

Пример:

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

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

выравнивает содержимое внутри элемента сетки вдоль ось строки (в отличие от align-items, которая выравнивается вдоль оси

). Это значение применяется ко всем элементам сетки внутри контейнера.

    Значения:
  • start
  • - выравнивает содержимое в левом конце области сетки
  • конец
  • - выравнивает содержимое в правый конец области сетки
  • center
  • - выравнивает содержимое в центр области сетки
  • stretch
.container {
justify-items: start | end | center | stretch;
}

Примеры:

.container {
justify-items: start;
}

Example of justify-items set to start

.container{
justify-items: end;
}

Example of justify-items set to end

.container {
justify-items: center;
}

Example of justify-items set to center

.container {
justify-items: stretch;
}

Example of justify-items set to stretch

Такое поведение можно также задать для отдельных элементов сетки через свойство justify-self .

# align-items

Выравнивает содержимое внутри элемента сетки вдоль оси(в отличие от justify-items , которая выравнивается вдоль оси). Это значение применяется ко всем элементам сетки внутри контейнера.

Значения:

  • start- выравнивает содержимое в верхней части области сетки
  • конец- выравнивает содержимое в нижней части области сетки
  • center- выравнивает содержимое в центре площадь сетки
  • stretch- заполняет всю высоту области сетки (это значение по умолчанию)
.container {
align-items: start | end | center | stretch;
}

Примеры:

.container {
align-items: start;
}

Example of align-items set to start

.container {
align-items: end;
}

Example of align-items set to end

.container {
align-items: center;
}

Example of align-items set to center

.container {
align-items: stretch;
}

Example of align-items set to stretch

Такое поведение можно также задать для отдельных элементов сетки через свойство align-self .

# justify-content

Иногда общий размер вашей сетки может быть меньше размера его контейнера сетки. Это может произойти, если все ваши элементы сетки имеют размер с негибкими единицами, такими какpx. В этом случае вы можете установить выравнивание сетки в контейнере сетки. Это свойство выравнивает сетку вдоль оси(в отличие от align-content , которая выравнивает сетку вдоль оси).

Значения:

  • start- выравнивает сетку в левом конце контейнера сетки
  • конец- выравнивает сетку в правый конец контейнера сетки
  • center- выравнивает сетку в центр контейнера сетки
  • stretch- изменяет размеры элементов сетки, чтобы сетка могла заполнить всю ширину контейнера сетки
  • space-around- помещает ровное пространство между каждым элементом сетки, размерные пробелы на дальних концах
  • пробел между- помещает ровное количество места между каждым элементом сетки, без пробела в дальних концах
  • space-evenly- помещает ровное пространство между каждым элементом сетки, включая дальние концы
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Примеры:

.container {
justify-content: start;
}

Example of justify-content set to start

.container {
justify-content: end;
}

Example of justify-content set to end

.container {
justify-content: center;
}

Example of justify-content set to center

.container {
justify-content: stretch;
}

Example of justify-content set to stretch

.container {
justify-content: space-around;
}

Example of justify-content set to space-around

.container {
justify-content: space-between;
}

Example of justify-content set to space-between

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

Example of justify-content set to space-evenly

# align-content

Иногда общий размер вашей сетки может быть меньше размера его контейнера сетки. Это может произойти, если все ваши элементы сетки имеют размер с негибкими единицами, такими какpx. В этом случае вы можете установить выравнивание сетки в контейнере сетки. Это свойство выравнивает сетку вдоль оси(в отличие от justify-content , которая выравнивает сетку вдоль оси).

Значения:

  • start- выравнивает сетку в верхней части контейнера сетки
  • конец- выравнивает сетку в нижней части контейнера сетки
  • center- выравнивает сетку в центре контейнер сетки
  • stretch- изменяет размеры элементов сетки, чтобы позволить сетке заполнить всю высоту контейнера сетки
  • space-around- помещает ровное пространство между каждым элементом сетки с полуразмерными пространствами на дальних концах
  • пробел между- помещает ровное пространство между каждым элементом сетки, без пробела на дальних концах
  • space-evenly- помещает ровное пространство между каждым элементом сетки, включая дальние концы
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Примеры:

.container {
align-content: start;
}

Example of align-content set to start

.container {
align-content: end;
}

Example of align-content set to end

.container {
align-content: center;
}

Example of align-content set to center

.container {
align-content: stretch;
}

Example of align-content set to stretch

.container {
align-content: space-around;
}

Example of align-content set to space-around

.container {
align-content:<