Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Учебное пособие по макетированию сетки CSS Grid

I. Обзор

Макет сетки (Grid) — самое мощное решение для макетирования CSS.

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

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

Макет сетки имеет определенное сходство с макетом Flex: оба могут указывать положение нескольких элементов внутри контейнера. Однако есть важные различия.

Гибкий макет представляет собой макет оси и может указывать только положение «элемента» относительно оси, которое можно рассматривать какОдномерная планировка . Макет сетки делит контейнер на «строки» и «столбцы», генерирует ячейки, а затем указывает ячейку, в которой находится «элемент», что можно рассматривать как2D макет . Макет сетки гораздо более мощный, чем макет Flex.

2. Основные понятия

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

2.1 Контейнеры и проекты

Область с сеткой называется «контейнером». Дочерние элементы, использующие позиционирование по сетке внутри контейнера, называются «элементами».

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

В приведенном выше коде самый внешний<div>Элемент представляет собой контейнер, а три внутренних<div>Элементы — это предметы.

Уведомление: проект может быть только дочерним элементом верхнего уровня контейнера и не включает дочерние элементы проекта, такие как приведенный выше код.<p> Элементы не являются предметами. Макет сетки действует только на проекты.

2.2 Строки и столбцы

Горизонтальная область внутри контейнера называется «строкой», а вертикальная область — «столбцом».

На рисунке выше горизонтальные темные области — это «строки», а вертикальные темные области — «столбцы».

2.3 Ячейки

Область пересечения строк и столбцов называется «ячейкой».

В нормальных условиях,nхорошо иmстолбцы будут производитьn x m клетки. Например, 3 строки и 3 столбца дадут 9 ячеек.

2.4 Линии сетки

Линии, разделяющие сетку, называются «линиями сетки». Горизонтальные линии сетки разделяют строки, а вертикальные линии сетки разделяют столбцы.

В нормальных условиях,nХОРОШОn + 1корневая горизонтальная линия сетки,mВнесен в списокm + 1Есть три вертикальные линии сетки, например, есть четыре горизонтальные линии сетки в три ряда.

На рисунке выше представлена ​​сетка 4 x 4 с 5 горизонтальными и 5 вертикальными линиями сетки.

3. Свойства контейнера

Свойства макета Grid разделены на две категории. Один тип определен в контейнере и называется свойствами контейнера; другой тип определен в проекте и называется свойствами проекта. В этой части сначала рассматриваются свойства контейнера.

3.1 атрибут отображения

display: gridУказывает контейнер для использования макета сетки.

div {
  display: grid;
}
1
2
3

Картинка вышеdisplay: gridизЭффект。

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

div {
  display: inline-grid;
}
1
2
3

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

Картинка вышеdisplay: inline-gridизЭффект。

Обратите внимание, что после настройки макета сетки подэлементы контейнера (элементы)float、display: inline-block、display: table-cell、vertical-alignиcolumn-*Все остальные настройки будут недействительны.

3.2 атрибут Grid-template-columns, атрибут Grid-template-rows.

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

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

приведенный выше кодОпределяет сетку с тремя строками и тремя столбцами. Ширина столбца и высота строки являются одинаковыми.100px。

Вместо использования абсолютных единиц вы также можете использовать проценты.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

（1）повторить()

Иногда очень затруднительно записать одно и то же значение несколько раз, особенно когда сеток много.В это время вы можете использоватьrepeat() Функция, которая упрощает повторяющиеся значения.В приведенном выше коде используетсяrepeat()Переписано следующим образом.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()Принимает два параметра: первый параметр — это количество повторений (3 в приведенном выше примере), а второй параметр — это значение, которое нужно повторить.

repeat()Повторение шаблона — это нормально.

grid-template-columns: repeat(2, 100px 20px 80px);
1

приведенный выше кодОпределено 6 столбцов, ширина первого и четвертого столбцов равна100px, второй и пятый столбцы20px, третий столбец и шестой столбец80px。

(2) ключевое слово автозаполнения

Иногда размер ячейки фиксирован, но размер контейнера не определен.Если вы хотите, чтобы каждая строка (или столбец) вмещала как можно больше ячеек, вы можете использоватьauto-fillКлючевые слова представляют собой автозаполнение.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

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

Кромеauto-fillи ключевое словоauto-fit , поведение обоих в основном одинаково.Только если контейнер достаточно широк, чтобы вместить все ячейки в одной строке, а ширина ячейки не фиксирована.поведенческие различия：auto-fillОставшаяся ширина будет заполнена пустыми ячейками.auto-fitпопытается увеличить ширину ячейки.

(3) ключевое слово fr

Чтобы удобно выражать пропорциональные отношения, макет сетки обеспечиваетfr Ключевое слово (сокращение от Fraction, что означает «фрагмент»).Если ширина двух столбцов равна1frи2fr, что означает, что последнее в два раза больше первого.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

приведенный выше кодПредставляет два столбца одинаковой ширины.

frМожет использоваться совместно с единицами абсолютной длины, что очень удобно.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

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

（4）минмакс()

minmax() Функция создает диапазон длин, указывая, что длина находится в этом диапазоне. Он принимает два параметра: минимальное значение и максимальное значение.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

В приведенном выше кодеminmax(100px, 1fr)Указывает, что ширина столбца не менее100px, не более1fr。

(5)автоматическое ключевое слово

autoДлина представления ключевого слова определяется самим браузером.

grid-template-columns: 100px auto 100px;
1

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

(6) Название линий сетки

grid-template-columnsатрибуты иgrid-template-rowsВ свойствах вы также можете использовать квадратные скобки, чтобы указать имя каждой линии сетки для удобства использования в будущем.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

Приведенный выше код определяет макет сетки из 3 строк x 3 столбца, поэтому имеется 4 вертикальные линии сетки и 4 горизонтальные линии сетки. Внутри квадратных скобок указаны названия восьми строк.

Макет сетки позволяет использовать несколько имен для одной и той же линии, например:[fifth-line row-5]。

(7) Пример компоновки

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

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

Приведенный выше код устанавливает левый столбец на 70%, а правый столбец на 30%.

Традиционную компоновку из двенадцати сеток также легко написать.

grid-template-columns: repeat(12, 1fr);
1

3.3 атрибут разрыва строки сетки, атрибут разрыва столбца сетки, атрибут разрыва сетки.

grid-row-gapСвойство задает расстояние между строками (межстрочный интервал),grid-column-gapСвойство задает интервал между столбцами (межколоночный интервал).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

приведенный выше кодсередина,grid-row-gapИспользуется для установки межстрочного интервала,grid-column-gapИспользуется для установки интервала между столбцами.

grid-gapСвойстваgrid-column-gapиgrid-row-gapКомбинированная форма сокращения имеет следующий синтаксис.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

Таким образом, приведенный выше фрагмент кода CSS эквивалентен следующему коду.

.container {
  grid-gap: 20px 20px;
}
1
2
3

еслиgrid-gapВторое значение опускается, и браузер считает второе значение равным первому.

Согласно новейшим стандартам, три вышеуказанных имени атрибутаgrid-Префикс удален,grid-column-gapиgrid-row-gapнаписано какcolumn-gapиrow-gap，grid-gapнаписано какgap。

3.4 Свойство Grid-Template-Area

Макет сетки позволяет указать «области», состоящие из одной или нескольких ячеек.grid-template-areasСвойства используются для определения областей.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

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

Способ записи объединения нескольких ячеек в одну область заключается в следующем.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

Приведенный выше код делит 9 ячеек наa、b、cтри области.

Ниже приведен пример макета.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

В приведенном выше коде верхняя часть — это область заголовка.header, внизу — область нижнего колонтитулаfooter, средняя частьmainиsidebar。

Если некоторые области не нуждаются в эксплуатации, используйте «очки» (.)выражать.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

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

Обратите внимание, что наименование регионов влияет на линии сетки.Начальная линия сетки каждой области автоматически получает имя区域名-start, конечная линия сетки автоматически получает имя区域名-end。

Например, территория называетсяheader, то горизонтальные линии сетки и вертикальные линии сетки в начальной позиции называютсяheader-start, горизонтальные линии сетки и вертикальные линии сетки в конечной позиции называютсяheader-end。

3.5 атрибут автоматического потока сетки

После разделения сетки дочерние элементы контейнера будут автоматически размещены в каждой сетке по порядку. Порядок размещения по умолчанию — «сначала строка, затем столбец», то есть сначала заполните первую строку, а затем начните размещать вторую строку (это порядок чисел, показанный на рисунке ниже).

Этот порядок данgrid-auto-flowЗначение по умолчанию определяется атрибутом.row , то есть «сначала строка, потом строка».Вы также можете установить его наcolumn, становится «сначала строка, затем строка».

grid-auto-flow: column;
1

приведенный выше кодуже настроенcolumnС этого момента порядок размещения будет таким, как показано ниже.

grid-auto-flowПомимо установки атрибутаrowиcolumn, также можно установить наrow denseиcolumn dense . Эти два значения в основном используются для автоматического размещения оставшихся элементов после того, как определенным элементам будут присвоены позиции.

Пример нижеПусть проект №1 и проект №2 занимают по две ячейки каждый, и тогда по умолчаниюgrid-auto-flow: rowВ этом случае будет получен следующий макет.

На рисунке выше позиция за элементом № 1 пуста. Это связано с тем, что элемент № 3 по умолчанию следует за элементом № 2, поэтому он будет ранжироваться после элемента № 2.

Теперь измените настройки и установите значениеrow dense, означает «сначала строка, потом столбец», и заполняйте его как можно плотнее, без пробелов.

grid-auto-flow: row dense;
1

приведенный выше кодЭффект заключается в следующем.

Изображение выше сначала заполнит первую строку, затем вторую, поэтому элемент 3 будет следовать за элементом 1. Предметы №8 и №9 будут размещены в четвертом ряду.

Если вы измените настройку наcolumn dense, означает «сначала столбец, затем строка» и заполните как можно больше пробелов.

grid-auto-flow: column dense;
1

приведенный выше кодЭффект заключается в следующем.

Изображение выше сначала заполнит первый столбец, а затем второй столбец, поэтому элемент № 3 находится в первом столбце, а элемент № 4 – во втором столбце. Пункты 8 и 9 были втиснуты в четвёртый столбец.

3.6 атрибут justify-items, атрибут align-items, атрибут Place-items.

justify-itemsСвойство устанавливает горизонтальное положение содержимого ячейки (слева, по центру, справа),align-itemsСвойство устанавливает вертикальное положение (сверху, посередине, снизу) содержимого ячейки.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

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

• начало: выравнивание начального края ячейки.
• конец: выравнивание по конечному краю ячейки.
• центр: Центр внутри ячейки.
• растянуть: растянуть, чтобы занять всю ширину ячейки (значение по умолчанию).

.container {
  justify-items: start;
}
1
2
3

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

.container {
  align-items: start;
}
1
2
3

приведенный выше кодУказывает, что содержимое ячейки выровнено по заголовку, а эффект такой, как показано ниже.

place-itemsСвойстваalign-itemsатрибуты иjustify-itemsКомбинированная сокращенная форма свойства.

place-items: <align-items> <justify-items>;
1

Ниже приведен пример.

place-items: start end;
1

Если второе значение опущено, браузер считает его равным первому значению.

3.7 атрибут justify-content, атрибут align-content, атрибут Place-content.

justify-contentАтрибут — горизонтальное положение всей области контента внутри контейнера (слева, по центру, справа),align-contentАтрибут — вертикальное положение всей области контента (сверху, посередине, снизу).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

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

• start — начальная граница выровненного контейнера.
  
• end — выравнивает конечную границу контейнера.
  
• center — центрировать контейнер внутри.
  
• растянуть — если размер элемента не указан, растянуть, чтобы занять весь контейнер сетки.
  
• пространство вокруг — равное пространство с обеих сторон каждого предмета. Таким образом, пространство между элементами в два раза больше, чем пространство между элементами и границей контейнера.
  
• space-between — между элементами имеется одинаковое пространство, а между элементами и границей контейнера нет пространства.
  
• space-evenly — расстояние между элементами одинаковое, а пространство между элементами и границей контейнера имеет одинаковую длину.
  
  place-contentСвойстваalign-contentатрибуты иjustify-contentКомбинированная сокращенная форма свойства.

place-content: <align-content> <justify-content>;
1

Ниже приведен пример.

place-content: space-around space-evenly;
1

Если вы опустите второе значение, браузер предполагает, что второе значение равно первому.

3.8 свойство Grid-auto-columns, свойство Grid-auto-rows

Иногда некоторым элементам назначаются позиции за пределами существующей сетки. Например, в сетке всего 3 столбца, но в 5-й строке указан определенный элемент. В это время браузер автоматически создаст дополнительные сетки для облегчения размещения элементов.

grid-auto-columnsатрибуты иgrid-auto-rows Свойства используются для установки ширины столбца и высоты строки избыточной сетки, автоматически создаваемой браузером.Они пишутся так же, как иgrid-template-columnsиgrid-template-rows Точно так же. Если эти два свойства не указаны, браузер определяет ширину столбца и высоту строки новой сетки полностью на основе размера содержимого ячейки.

Пример нижеВнутри разделенная сетка представляет собой 3 строки х 3 столбца, но элемент № 8 указан в 4-й строке, а элемент № 9 указан в 5-й строке.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

Приведенный выше код указывает, что высота новой строки равна 50 пикселей (исходная высота строки — 100 пикселей).

3.9 атрибут шаблона сетки, атрибут сетки.

grid-templateСвойстваgrid-template-columns、grid-template-rowsиgrid-template-areasОбъединенная сокращенная форма этих трех свойств.

gridСвойстваgrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowКомбинированное сокращение этих шести свойств.

С точки зрения удобства чтения и записи рекомендуется не объединять атрибуты, поэтому эти два атрибута не будут здесь подробно рассматриваться.

4. Атрибуты проекта

В проекте определены следующие свойства.

4.1 свойство начала столбца сетки, свойство конца столбца сетки, свойство начала строки сетки, свойство конца строки сетки.

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

• grid-column-startСвойства: Вертикальные линии сетки, где расположена левая граница.
• grid-column-endСвойство: вертикальная линия сетки, где расположена правая граница.
• grid-row-startСвойства: Горизонтальная линия сетки, где расположена верхняя граница.
• grid-row-endСвойства: Горизонтальная линия сетки, где расположена нижняя граница.

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

приведенный выше кодУказывает, что левая граница элемента 1 — это вторая вертикальная линия сетки, а правая граница — четвертая вертикальная линия сетки.

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

За исключением элемента № 1, остальные элементы не имеют заданных позиций и автоматически размещаются браузером. В это время их позиции определяются контейнером.grid-auto-flowЗначение этого атрибута по умолчанию определяется атрибутом.row , поэтому они будут расположены «сначала строка, затем столбец».Читатели могут изменить значение этого атрибута наcolumn、row denseиcolumn dense, чтобы увидеть, как изменились положения других элементов.

Пример нижеЭто результат указания положения четырех границ.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

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

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

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

Значения этих четырех атрибутов также можно использоватьspanКлючевое слово, обозначающее «диапазон», то есть количество сеток, охватывающих левую и правую границы (верхнюю и нижнюю границы).

.item-1 {
  grid-column-start: span 2;
}
1
2
3

приведенный выше кодУказывает, что левая граница элемента № 1 занимает 2 сетки от правой границы.

Это связано скод нижеЭффект точно такой же.

.item-1 {
  grid-column-end: span 2;
}
1
2
3

Используя эти четыре атрибута, если элементы перекрываются, используйтеz-indexСвойство определяет порядок перекрытия элементов.

4.2 атрибут столбца сетки, атрибут строки сетки.

grid-columnСвойстваgrid-column-startиgrid-column-endКомбинированная форма аббревиатурыgrid-rowСвойстваgrid-row-startатрибуты иgrid-row-endКомбинированная аббревиатура .

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

Ниже приведен пример.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

В приведенном выше коде проектitem-1Займите первую строку, от первой строки столбца до третьей строки столбца.

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

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

приведенный выше кодв, проектitem-1Занимаемая площадь включает в себя первую строку + вторую строку и первый столбец + второй столбец.

Косую черту и последующие части можно опустить и по умолчанию охватывать сетку.

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

В приведенном выше коде проектitem-1Займите первую сетку в верхнем левом углу.

4.3 атрибут области сетки

grid-areaАтрибут определяет область, в которой находится элемент.

.item-1 {
  grid-area: e;
}
1
2
3

приведенный выше кодВ России Проект № 1 расположен в г.eобласти, эффект будет таким, как показано ниже.

grid-areaСвойства также можно использовать какgrid-row-start、grid-column-start、grid-row-end、grid-column-endОбъединенная форма аббревиатуры напрямую указывает местоположение проекта.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

Ниже приведенпример。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4.4 атрибут justify-self, атрибут align-self, атрибут Place-self.

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

align-selfСвойство устанавливает вертикальное положение (сверху, посередине, снизу) содержимого ячейки, за которым следуетalign-itemsАтрибуты используются точно так же и влияют только на один проект.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

Оба свойства могут принимать следующие четыре значения.

• начало: выравнивание начального края ячейки.
• конец: выравнивание по конечному краю ячейки.
• центр: Центр внутри ячейки.
• растянуть: растянуть, чтобы занять всю ширину ячейки (значение по умолчанию).

Нижеjustify-self: startпример.

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

place-selfСвойстваalign-selfатрибуты иjustify-selfКомбинированная сокращенная форма свойства.

place-self: <align-self> <justify-self>;
1

Ниже приведен пример.

place-self: center center;
1

Если второе значение опущено,place-selfСвойство будет считать эти два значения равными.