1. Введение

Макет сетки — это новый метод компоновки в css, который имеет строгий контроль над положением и размером блоков и содержимым блоков. В отличие от flex, flex фокусируется на одной оси, а grid подходит для нескольких осей, поэтому давайте сделаем краткое введение.

схема гибкого макета

Макет сетки

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

Элемент с display: grid; set называется контейнером, а его непосредственные дочерние элементы называются элементами, но обратите внимание, что элементы-потомки не являются элементами.

grid line: Линия сетки, составляющая структуру макета сетки, делится на два типа: горизонтальную и вертикальную.

grid track: пространство между двумя соседними линиями сетки, которое можно рассматривать как строку или столбец.

grid cell: Пространство, образованное разделительной линией между двумя соседними строками и соседними столбцами, является единицей в макете сетки.

grid area: Все пространство обернуто четырьмя линиями сетки, любое количество ячеек сетки образует область сетки.

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

В грид-контейнере по-прежнему много свойств, всего их 18, но многие можно сделать стенографически, так что не слишком нервничайте.

• серия шаблонов сетки
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
• серия с зазором в сетке
  • grid-column-gap
  • grid-row-gap
• серия предметов места
  • justify-items
  • align-items
• серия мест содержания
  • justify-content
  • align-content
• серия сетки
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow

3.1 серия шаблонов сетки

3.1.1 grid-template-columns, grid-template-rows

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

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

Это определяет контейнер сетки с тремя строками и тремя столбцами.Значения, полученные grid-template-rows/grid-template-columns, равны auto, fr, px и %.

Ввести fr, собственно, понять несложно, так же, как и flex: 1.

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

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: [column-1] 1fr [column-2] 1fr [column-3] 1fr [column-4];
  grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4];
}
/** 通过 repeat 方法可以简写如下
* 此处需要注意的就是线条命名变成了从1开始递增，并且是用空格分隔字母和序号，类似: row 1、row 2、row 3
**/
.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: repeat(3, 1fr column);
  grid-template-rows: repeat(3, 1fr row);
}

3.1.2 grid-template-areas

Область шаблона сетки: Назначив имя области сетки, свойство проекта grid-area удобно получить доступ к области сетки.Синтаксис следующий: области-шаблона-сетки: нет | имя-области-сетки | .(точка);

нет: заданная область сетки;

grid-area-name: определенное имя области сетки, используемое свойством элемента grid-area; .: пустая ячейка сетки;

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: repeat(3, 1fr column);
  grid-template-rows: repeat(3, 1fr row);
  grid-template-areas:
    "header header header"
    "main . sidebar"
    "footer footer footer";  
}
.container>div {
  border: 1px solid lightcoral;
}
// 项目
.item1 {
  grid-area: header;
}
.item2 {
  grid-area: sidebar;
}
.item3 {
  grid-area: main;
}
.item4 {
  grid-area: footer;
}
// html
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

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

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

.item1 {
  grid-area: header;
}
// 以上代码效果等同于
.item1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

3.1.3 grid-template

Наконец, мы пришли к этому составному свойству, которое похоже на фон, шрифт, рамку и т. д. Это набор свойств, описанных выше, в серии шаблонов сетки.

Сначала посмотрите на основной синтаксис: grid-template: нет | grid-template-rows / grid-template-columns;

нет: сброс всех свойств к их первоначальным значениям;

grid-template-rows / grid-template-columns: задайте для grid-template-columns и grid-template-rows указанное значение соответственно и установите для grid-template-areas значение none;

Увидев это, у некоторых могут возникнуть сомнения: почему вы не видите grid-template-area для всех согласованных свойств? Честно говоря, синтаксис немного сложноват, поэтому давайте рассмотрим его отдельно.

// 使用 grid-template 综合之前的所有属性
grid-template:
  [row1-start] "header header header" 1fr [row1-end]
  [row2-start] "main . sidebar" 1fr [row2-end]
  [row2-start] "footer footer footer" 1fr [row2-end]
  / [column-start] 1fr 1fr 1fr [column-end];

// -------------分割线-------------
.item1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
// 以上代码效果等同于
.item1 {
  grid-column-start: column-start;
  grid-column-end: column-end;
}

3.2 серия с зазором в сетке

Эта серия относительно проста, она предназначена для определения зазора между строками и столбцами и вводится непосредственно с помощью grid-gap.

сетка-разрыв: сетка-строка-разрыв сетка-столбец-разрыв; Если записано только одно значение, промежутки между строками и столбцами совпадают.

Уведомление: в Chrome 68+, Safari 11.2 версии 50+ и Opera 54+ можно удалить префикс сетки, и нужны только пробелы между строками, пробелами в столбцах и пробелами.

.containner {
  // ... 之前的代码
  grid-gap: 10px;
}

Для отличия исходный макет обрамлен красным, а интервал между пунктирными линиями установлен в 10px. Схематическая диаграмма выглядит следующим образом:

3.3 позиции-места и серии мест-контента

place-items: justify-items align-items;

place-content: justify-content align-content;

Эти две серии представлены вместе, потому что многие места очень похожи и имеют одинаковую цель.

justify-items: Горизонтальное выравнивание элементов сетки, по умолчанию — растяжение, а другие значения — начало, конец и центр.

stretch:

start:

end:

center:

align-items: Вертикальное выравнивание элементов сетки в целом такое же, как и у элементов выравнивания, но горизонтальное выравнивание заменяется вертикальным.

// 下面两个属性需要我们调整一下之前的 css 代码，由于 place 系列需要某些特殊情况（就是 item 组成的网格大小小于容器）
.box {
  margin: 200px auto;
  display: grid;
  width: 500px;
  height: 500px;
  grid-template: 100px 100px / 100px 100px;
  gap: 10px;
  justify-content: start;
  border: 1px solid #ccc;
}

.box>div {
  border: 1px solid lightcoral;
}

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 1;
  grid-row: 2;
}

.item4 {
  grid-column: 2;
  grid-row: 2;
}

justify-content: Горизонтальное выравнивание сетки в целом относительно контейнера.Значение по умолчанию — start, а другие значения — end, center, stretch, space-around, space-between и space-evenly.

start:

end:

center:

stretch: то же, что и start в этом примере.

space-around:

space-between:

space-evenly:

align-content: является противоположностью justify-content.

3.4 серия сетки

grid-auto-columnsа такжеgrid-auto-rowsМожет использоваться для определения размера нашей неявной сетки за пределами количества ячеек сетки.

.box {
  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
}

Если выше не определены такие свойства, как grid-template, на основе элемента будет создана сетка размером 100 * 100 пикселей.

.item4 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

Если есть такой элемент, определение которого превышает количество сеток, то его размер 100*100 px, заданный grid-auto.Здесь ширина автоматически созданного элемента может регулироваться только с помощью grid-auto-columns, но не высота.

grid-auto-flow: определяет, например, направление самопотока элемента.

// html
<div class="box">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

// css
.box {
  margin: 200px auto;
  display: grid;
  width: 500px;
  height: 500px;
  grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr;
  grid-auto-flow: row;
  gap: 10px;
  justify-content: start;
}

.box>div {
  border: 1px solid lightcoral;
}

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

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

Ситуация в РОУ:

Случай столбца:

gird: является сокращением для следующих свойств: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow. Обратите внимание, однако, что вы можете объявлять только явные или неявные свойства одновременно.

/** 
* 隐式属性部分
**/
grid: auto-flow / 1fr 1fr 1fr;
// 等同于
grid-auto-flow: row;
grid-template-columns: 1fr 1fr 1fr;

grid: auto-flow dense 100px / 1fr 1fr 1fr;
// 等同于
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 1fr 1fr;

/** 
* 显示属性部分
**/
gird: 1fr 1fr 1fr / 1fr 1fr 1fr;
// 等同于
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;

/**
* 复杂属性
**/
grid: [row1-start] "header header header" 1fr [row1-end]
      [row2-start] "main . sidebar" 1fr [row2-end]
      [row3-start] "footer footer footer" 1fr [row3-end] / 1fr 1fr 1fr;
// 等同于
grid-template-areas:
  "header header header"
  "footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end row3-start] 1fr [row3-end];
grid-template-columns: 1fr 1fr 1fr;

4. Свойства проекта

Здесь следует отметить одну вещь: вспышка, отображение (кроме встроенной таблицы, содержимого, таблицы), вертикальное выравнивание и столбец-* не влияют на элементы элемента сетки.

4.1 сетка-столбец, сетка-строка

Он имеет 4 свойства: grid-column-start, grid-column-end, grid-row-start, grid-row-end, которые используются для определения позиции элемента.

Значения свойств: number | lineName | span | span | auto

Значение атрибута вводится на примере сетки из 9 квадратов.

число: слева направо и сверху вниз 1, 2, 3 и 4.

lineName: имя разделительной линии, определенной в контейнере.

span | span : количество пролетов и расстояние до разделительной линии.

auto: Автодиапазон или 1 диапазон по умолчанию.

// 将某个 item 定位到 第 2 行第 3 列
// number
.item {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
// lineName
.container {
  // ...
  grid-template-columns: [column-1] 1fr [column-2] 1fr [column-3] 1fr [column-4];
  grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4];
}
.item {
  grid-column:column-3 / column-4;
  grid-row: row-2 / row-3;
}
// span <number> | span <name>
.item {
  grid-column:column-3 / span 1;
  grid-row: row-2 / span row-3;
}

4.2 grid-area

Установите позицию элемента по имени, заданному контейнером grid-template-areas, которое также можно рассматривать как аббревиатуру grid-row-start + grid-column-start + grid-row-end + grid-column-end.

.container {
  // ...
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "main . sidebar" 1fr [row2-end]
        [row3-start] "footer footer footer" 1fr [row3-end] / 1fr 1fr 1fr;
}
.item-1 {
  grid-area: header;
}
// 另一种写法
.item {
  grid-area: row1-start / 1 / row1-end / 4;
}

4.3 place-self

Имеет два свойства: justify-self и align-self: выравнивает элементы сетки в ячейках по встроенной оси (строка/столбец), основные значения: начало | конец | центр | растяжение.

place-self: align-self justify-self;

.item-1 {
  place-self: center stretch;
}

5. Дополнение

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

Неявная сетка: поток по умолчанию grid-auto-flow, свойство grid-auto-flow может изменить строку направления потока по умолчанию на столбец.