Полное руководство по компоновке сетки в CSS

CSS

Grid — это система, основанная на двухмерной сетке, с помощью которой мы можем легко реализовать сложные макеты в прошлом, не используяfloat, inline-block, positionПо сути, это методы взлома.

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

Как и таблицы, макеты сетки позволяют нам выравнивать элементы по строкам или столбцам. Однако с точки зрения компоновки сетки более вероятны или проще, чем таблицы.

концепция макета сетки

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

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

Трек сетки — это пространство между двумя линиями сетки. Они используют свойстваgrid-template-columnsа такжеgrid-template-rowsОпределяется в сетке.

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

Линии сетки

использоватьGridМакет создает линии сетки при определении дорожек в явной сетке.

К линиям сетки можно обращаться по их номерам. На языке с письмом слева направо列线1будет на левой стороне сетки,行线1будет над ним. Нумерация строк соответствует шаблону письма документа, поэтому в языках с письмом справа налево列线1Ряды будут с правой стороны сетки. На изображении ниже показана нумерация строк для этой сетки, при условии, что язык написан слева направо.

Ячейка сетки

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

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

Область сетки — это прямоугольная область сетки, состоящая из одной или нескольких ячеек сетки. По существу, область сетки должна быть прямоугольной. Например, невозможно создать Т-образную или Г-образную область сетки.

Шаг сетки (желоба)

Шаг сетки — это расстояние между дорожками сетки, которое можно указать с помощьюgrid-column-gap,grid-row-gapСоздание макета сетки.

Использовать сетку

Подобно гибкости, чтобы использовать сетку, вы должны сначала создать контейнер и поместить элемент.displayУстановить какgridВы можете получить контейнер сетки. Дочерние элементы контейнера — это элементы сетки, похожие наtableсерединаtd, но более гибкий.

float, clear, а такжеvertical-alignЭлементы не влияют на грид-контейнеры.

свойства на контейнере

шаблон сетки

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

grid-template-rows

Мы используемgrid-template-rowsчтобы явно указать, сколько строк имеет сетка. Он может принимать следующие значения:

  1. noneКлючевое слово, представляющее неоднозначную сетку. Все строки и их размеры будут заданыgrid-auto-rowsСвойства указываются неявно.
  2. 非负值的长度大小:Такие какpx, em, vwЖдать
  3. 百分比: относительно контейнера сетки, если онinline-grid, процентное значение будет рассматриваться какauto
  4. flex: неотрицательное значение, в единицахfrдля определения коэффициента эластичности размера дорожки сетки. каждый определяетflexСетка дорожек будет распределена пропорционально оставшемуся доступному пространству.
  5. max-contentКлючевое слово, указывающее на то, что трасса сетки занята наибольшим содержанием элемента сетки
  6. min-contentКлючевое слово, указывающее, что дорожка сетки занята наибольшим и наименьшим содержимым элемента сетки.
  7. autoЕсли дорожка сетки самая большая, она эквивалентнаmax-content, является минимумом, эквивалентнымmin-content

grid-template-columns

это иgrid-template-rowsТочно так же один устанавливает строку сетки, а другой - столбец сетки.

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


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

Функции, которые можно использовать в Grid

В макете Grid мы также можем использовать следующие 3 функции.

repeat()

repeatФункции могут выражать выражения с большим количеством повторяющихся строк более компактным способом.

как вышеgrid-template-columns: 1fr 1fr 1fr;Мы можем написатьrepeat(3, 1fr). Его первый параметр — количество повторений, которое может бытьauto-fillа такжеauto-fit.

auto-fill

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

auto-fit

а такжеauto-fillведет себя так же, за исключением того, что любые пустые повторяющиеся дорожки сворачиваются после размещения элемента сетки.

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

minmax()

Определяет замкнутый интервал длины и ширины. Он принимает два параметра, min и max. Он возвращает значение в этом диапазоне.

Такие какminmax(max-content, 300px), максимум не может быть больше300px

minmax(200px, 1fr)Минимум не может быть меньше200px

fit-content()

это эквивалентноmin(maximum size, max(minimum size, argument)). Параметрами могут быть значения длины и проценты.

Он принимает максимальное значение в минимальном значении содержимого и параметра, а затем принимает минимальное значение в максимальном значении содержимого.

То есть, когда содержимое маленькое, оно принимает длину содержимого, а если содержимое большое и длина содержимого больше длины параметра, оно принимает длину параметра.

grid-template-areas

Этот блок сетки свойств требует иgrid-areaПри совместном использовании его значение может бытьnoneа также字符串.

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

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

grid-template-areasстрока, связанная с элементом сеткиgrid-area, который определяет область.

grid-template

даgrid-template-rows,grid-template-columnsа такжеgrid-template-areasсокращение для .

Его значение можно разделить на три случая:

  1. none
  2. Может использоваться только при определении строк и столбцовrows/columnsсинтаксис, напримерgrid-template: 100px 1fr / 50px 1fr;
  3. Когда есть все три, также используйте один/отделена, а его правая сторона по-прежнемуcolumns, но его левосторонний синтаксис<line-names>? <string> <track-size>? <line-names>?.
.page {
    grid-template: [header-top] "a a a"     [header-bottom]
                   [main-top]   "b b b" 1fr [main-bottom]
                   / auto 1fr auto;
}
/*
line-names 是可选的，自定义名称，需要使用中括号包裹，它其实相当于注释
string 网格项 grid-area 的关联值
track-size 这一行的大小
*/

#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template: [header-left] "head head" 30px [header-right]
                 [main-left]   "nav  main" 1fr  [main-right]
                 [footer-left] "nav  foot" 30px [footer-right]
                 / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-column: foot;
}

grid-row-gap / row-gap

Используется для установки размера промежутка между элементами строки. Его значениями могут быть значения длины, проценты иnormal.

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

.box{
    grid-row-gap: 1em;
}

grid-column-gap / column-gap

Используется для установки размера промежутка между столбцами элементов. Его значениями могут быть значения длины, проценты иnormal.

normalИнтервал по умолчанию для макета с несколькими столбцами — 1em, а интервал по умолчанию для других типов макетов — 0.

а такжеgrid-row-gapТак оно и есть, постепенноcolumn-gapзаменять.

.page {
    grid-column-gap: 1em;
}

grid-gap / gap

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

Также постепенно осуществляетсяgapзаменять.

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  background-color: lime;
}

Неявно созданные строки и столбцы

css grid автоматически регулирует положение каждого элемента в сетке в зависимости от размера и ширины окружающих элементов.

Например:

.box {
  display: grid;
  grid-template: 25px / 100px 160px;
  background: #000;
}
.box * {
  background: #ccc;
}
.box *:nth-child(even) {
  background: #777;
}

Мы определяем только одну строку и два столбца. Но у нас 5 детей. CSS Grid решает расширить их до неявно созданного пространства, столбцы во вновь созданной неявной строке автоматически изменяются с ранее указанногоgrid-template-rowsСвойство наследует высоту строки.

grid-column-start, grid-column-end, grid-row-startа такжеgrid-row-endЭти 4 свойства находятся в элементе сетки, они могут определять положение элемента сетки, если мы установим его положение за пределами определенной нами сетки, то он также неявно создаст строку или столбец.

grid-auto-rows

Указывает размер неявно созданных строк. Его значение может быть:

  1. 长度值:px em vmaxЖдать
  2. 百分比: относительно контейнера сетки
  3. flex: неотрицательное значение, в единицахfrдля определения коэффициента эластичности размера дорожки сетки. каждый определяетflexдорожек сетки пропорционально распределяют оставшееся свободное пространство
  4. max-contentКлючевое слово, указывающее, что дорожка сетки занята наибольшим содержимым элемента сетки.
  5. min-contentКлючевое слово, указывающее, что дорожка сетки занята наибольшим и наименьшим содержимым элемента сетки.
  6. autoЕсли дорожка сетки самая большая, она эквивалентнаmax-content, является минимумом, эквивалентнымmin-content

его ценность иgrid-template-rowsэто то же самое.

.box {
  display: grid;
  grid-template: 25px / 100px 160px;
  gap: 10px 20px;
  grid-auto-rows: 50px;
  background: #000;
}
.box * {
  background: #ccc;
}
.box *:nth-child(even) {
  background: #777;
}

grid-auto-columns

Задает ширину столбца неявно созданной сетки. его ценность иgrid-auto-rowsТакой же.

#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}

grid-auto-flow

Управляет работой алгоритма Auto Layout, точно определяя, как автоматически размещаемые элементы располагаются в сетке.

если мы находимся вdivнаписать несколькоdiv, а затем установите родительскийdisplay: grid;, с визуальной точки зрения можно обнаружить, что изменений нет. Но если мы затем поместим родителяdivдобавить предложениеgrid-auto-flow: column;Мы обнаружили, что дочерние элементы теперь отображаются в одну строку, что похоже на эффект эластичного прямоугольника.

grid-auto-flowЗначения следующие:

  1. rowУказывает, что алгоритм Auto Layout упорядочивает элементы, заполняя их построчно, добавляя новые строки при необходимости. (по умолчанию)
  2. columnУказывает, что алгоритм Auto Layout упорядочивает элементы, заполняя столбец за столбцом, добавляя новые столбцы по мере необходимости.

После этих двух ключевых слов вы также можете добавитьdenseключевые слова. Синтаксис[ row | column ] || dense.

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

Если вы опустите его, будет использоваться «разреженный» алгоритм, и алгоритм компоновки перемещается только «вперед» при размещении элементов в сетке, никогда не возвращаясь назад, чтобы заполнить пробелы. Это гарантирует, что все элементы Auto Layout будут отображаться «по порядку», даже если могут остаться пробелы, которые будут заполнены более поздними элементами.

grid-auto-flow: row;

grid-auto-flow: row dense;

grid

grid— это сокращенное свойство CSS, которое включает в себя почти все упомянутые выше свойства (кромеgap).

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

Его значение можно разделить на 3 категории

grid-template

какgrid-templateсокращенноgrid: [linename1] "a" 100px [linename2];

grid-template-rows / [ auto-flow && dense? ] grid-auto-columns?

grid-template-rowsустановить высоту строки (grid-template-columnsустановить какnone),/Назадauto-flowнадо написать(grid-auto-flowустановить какcolumn),наконецgrid-auto-columnsнастройки определяют, как автоматически повторять дорожку столбца (grid-auto-rowsсвойство установлено наauto).

Такие какgrid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;

[ auto-flow && dense? ] grid-auto-rows? / grid-template-columns

Этот способ написания противоположен предыдущему способу письма, это установкаgrid-template-columns(rowsсобственностьnone). дополнительные настройкиgrid-auto-rowsАтрибуты(columnsдляauto)

Такие какgrid: auto-flow dense / 30%;

Свойства элементов сетки

grid-row-start, grid-row-end, grid-column-start, grid-column-end

Укажите начальную позицию строки, конечную позицию строки, начальную позицию столбца и конечную позицию столбца элемента сетки в сетке соответственно.

Это требует понимания концепции линий сетки, введенной ранее.Горизонтальная линия (строка) увеличивается сверху вниз, а вертикальная линия (столбец) увеличивается справа, чтобы начать отсчет с 1.

Они могут принимать следующие значения:

  1. autoПредставляет автоматическое размещение, автоматический промежуток или по умолчаниюspan1
  2. 数字Представляет линии сетки
  3. span 数字означает охват нескольких сеток,数字меньше или равно0неверный. Строки или столбцы создаются неявно, если превышен размер сетки.

это иtableнесколько похоже

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

.box {
  display: grid;
  grid: 100px 100px / 100px 100px;
  background: #000;
}
.box * {
  background: #ccc;
}
.box *:nth-child(even) {
  background: #777;
}
.box1 {
  grid-column-start: span 5;
}

grid-row, grid-column

grid-rowа такжеgrid-columnОни являются сокращениями для вышеуказанных четырех свойств.

Синтаксис их значений такойstart / end. Если есть только одно значение, то этоstart,endзначение по умолчаниюauto.

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

использовать отрицательные значения

grid-area

Выше мы показалиgrid-areaа такжеgrid-template-areasкомбинированное использование.grid-areaФактическиgrid-row-start,grid-column-start,grid-row-endа такжеgrid-column-endсокращение для .

Его значение по умолчаниюgrid-area: auto;

Если установлено 4 значения, то его порядок

grid-area: row-start / column-start / row-end / column-end;

Если установлено 3 значения, то последнееauto

Если установлено 2 значения, то последние дваauto

Если установлено 1 значение, последние триauto

если первый элемент自定义表示, тогда все игнорируемые — это пользовательские представления

.box1 {
  grid-area: a / a;
}

/* 相当于 */

.box1 {
    grid-row-start: a;
    grid-column-start: a;
    grid-row-end: a;
    grid-column-end: a;
}

Выравнивание содержимого элемента сетки

мы можем использоватьalign-selfа такжеjustify-selfОтрегулируйте выравнивание содержимого элемента сетки.

align-selfдля вертикального выравнивания,justify-selfИспользуется для горизонтального выравнивания.

align-self

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

  1. start: содержимое выровнено по верхнему краю
  2. center: Содержимое центрировано по вертикали.
  3. end: содержимое выровнено по нижнему краю

justify-self

Он обычно используется в следующих трех значениях:

  1. start / left: содержимое выровнено по левому краю
  2. cneter: Содержимое по центру по горизонтали
  3. end / right: содержимое выровнено по правому краю

Категории