Учебник на дисплее: макет сетки, написанный для меня

by zhangxinxu from Ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу
Эта статья может быть воспроизведена полностью. Персональные веб-сайты не требуют авторизации. При сохранении оригинального автора, источника и ссылок в тексте любой веб-сайт может быть абстрагирован и агрегирован. Для коммерческого использования обращайтесь за авторизацией.

1. Введение и предметный указатель

Дать<div>Такие настройки элемента элемента блокаdisplay:gridили дать<span>Такие встроенные настройки элементаdisplay:inline-grid, макет сетки создан! Например:

div {
    display: grid;
}

На данный момент div является «контейнером сетки», а его дочерние элементы называются «дочерними элементами сетки». В макете Grid все соответствующие свойства CSS разделены на две группы: одна для контейнера сетки и одна для дочерних элементов сетки. Пожалуйста, обратитесь к таблице ниже для получения подробной информации, нажмите для быстрого индекса.

Действует на контейнер сетки	Действует на детей сетки
grid-template-columns grid-template-rows grid-template-areas grid-template grid-column-gap grid-row-gap grid-gap justify-items align-items place-items justify-content align-content place-content grid-auto-columns grid-auto-rows grid-auto-flow grid	grid-column-start grid-column-end grid-row-start grid-row-end grid-column grid-row grid-area justify-self align-self place-self

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

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

Поэтому, на мой взгляд, макет Grid похож на «разделение полей». История такова, Босс Чжан - программист, он сэкономил немного денег, живя скромно, а потом из-за урбанизации в его родном городе, в деревне нет людей, и земля там заброшена, поэтому он законтрактовал кусок земли и планируется выращивать рыбу.Различные фруктовые деревья. Контрактная территория очень большая, и разделение земли становится проблемой, поэтому босс Чжан планирует использовать сетку для ее разделения.

Во-вторых, свойства CSS, действующие на контейнер сетки.

1. столбцы сетки-шаблона и строки-шаблона сетки

Эти два свойства CSS используются для базового разделения полей: Columns означает столбцы, что означает вертикальное разделение, rows означает строки, что означает горизонтальное разделение. В реальном мире структура планировки сельскохозяйственных угодий обычно состоит из двух следующих элементов:

Поле A-поле B, следующее за ним земля C-земля D, представляет собой структуру слова «поле», но разделение между 4 полями представляет собой небольшую канаву, по которой нельзя пройти, а шириной можно пренебречь.
Поле A-поле гряда-поле B, далее идет земля C-поле гряда-земля D, что также является структурой слова «поле», но четыре участка земли разделены проходимым гребнем поля, а в некоторых местах также называют почвенной грядой.

Синтаксис разделения здесь такой же, как и в приведенном выше разделе сельскохозяйственных угодий, а именно:

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

На китайском это означает:

.container {
  grid-template-columns: <田地> ... 或 <田垄> <田地> ...;
  grid-template-rows: <田地> ... 或 <田垄> <田地> ...;
}

То есть:

<track-size>: Размер разделенного поля. Может быть значением длины, процентным значением иединица измерения(единица измерения оставшегося пространства в сетке).
<line-name>: Название гребня поля в середине, используемого для прогулок, можно называть произвольно.

См. простой пример:

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

grid-template-columnsПоследние 3 значения указывают на то, что они разделены на 3 столбца, и размер каждого столбца слева направо равен80px, авто и100px;
grid-template-rowsЗначение атрибута содержит 4 значения, что указывает на то, что оно разделено на 4 строки, а высота каждой строки сверху вниз равна25%,100px, авто и60px.

基本尺寸划分示意图

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

ширина 80px
на 25% выше

широкий авто
на 25% выше

100 пикселей в ширину
на 25% выше

ширина 80px
100 пикселей в высоту

широкий авто
100 пикселей в высоту

100 пикселей в ширину
100 пикселей в высоту

ширина 80px
высокий авто

широкий авто
высокий авто

100 пикселей в ширину
высокий авто

ширина 80px
60 пикселей в высоту

широкий авто
60 пикселей в высоту

100 пикселей в ширину
60 пикселей в высоту

Мы также можем назвать «гребни поля», которые являются разделителями сетки. Синтаксис заключается в использовании[]Оберните наше пользовательское имя, которое может быть китайским, например:

.container {
    grid-template-columns: [第一根纵线] 80px [纵线2] auto [纵线3] 100px [最后的结束线];
    grid-template-rows: [第一行开始] 25% [第一行结束] 100px [行3] auto [行4] 60px [行末];
}

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

[Первая вертикальная линия] [Вертикальная линия 2] [Вертикальная линия 3] [Последняя конечная строка]

[начало первой строки] [конец первой строки] [строка 3] [строка 4] [конец строки]

ширина 80px
на 25% выше

широкий авто
на 25% выше

100 пикселей в ширину
на 25% выше

ширина 80px
100 пикселей в высоту

широкий авто
100 пикселей в высоту

100 пикселей в ширину
100 пикселей в высоту

ширина 80px
высокий авто

широкий авто
высокий авто

100 пикселей в ширину
высокий авто

ширина 80px
60 пикселей в высоту

широкий авто
60 пикселей в высоту

100 пикселей в ширину
60 пикселей в высоту

Почему линии сетки называются?

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

Восточная дорога Нанкина начинается от Бунда на востоке, а именно от Восточной дороги Чжуншань, и заканчивается на Средней дороге Сицанг на западе.

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

Восточная Нанкинская дорога находится недалеко от первой дороги реки Хуанпу и недалеко от восьмой дороги реки Хуанпу.

Да, есть проблема с описанием этой местности, если однажды дорогу перекроют или построят новую дорогу, не будет ли путаницы?

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

двойное имя

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

.container {
    grid-template-columns: [第一根纵线] 80px [第1根纵线结束 第2根纵线开始] 100px [最后的结束线];
}

повторить синтаксис

Иногда деление нашей сетки очень регулярное, например, на основе40pxСоздадим сетку, если мы раскладываем по ширине960pxа не надо ли писать 24 раза40px, это действительно многословно, в это время вы можете использоватьrepeat()синтаксис, как показано ниже:

.container {
    grid-template-columns: repeat(24, 40px [col-start]);
}

Эквивалентно:

.container {
    grid-template-columns: 40px [col-start], 40px [col-start], /* ...省略20个...*/, 40px [col-start], 40px [col-start];
}

Что такое единица fr?

frявляется аббревиатурой слова фракция, что означает дробь.

Начнем с простого примера:
```
.container {
    grid-template-columns: 1fr 1fr 1fr;
}
```
1:1:1, ширина сетки делится на три равные части, эффект в реальном времени выглядит следующим образом:

ширина 1фр
занимать 1/3

ширина 1фр
занимать 1/3

ширина 1фр
занимать 1/3
Если имеется фиксированное значение размера, разделите оставшийся размер пространства, например:
```
.container {
    grid-template-columns: 200px 1fr 1fr 1fr;
}
```
4 столбца, ширина следующих 3 столбцов составляет 1/3 ширины контейнера сетки минус 200 пикселей, эффект в реальном времени выглядит следующим образом:

ширина 200px

ширина 1фр

ширина 1фр

ширина 1фр
А если смешать с авто?
```
.container {
    grid-template-columns: auto 1fr 1fr 1fr;
}
```
широкий авто

ширина 1фр

ширина 1фр

ширина 1фр

Как видно из приведенного выше эффекта, при наличии настройкиfrразмер,autoРазмеры отображаются как «завернутые», что соответствует ширине содержимого. Если не установленоfrразмерная сетка, она кажется растянутой.
еслиfrЧто делать, если сумма значений меньше 1?
```
.container {
    grid-template-columns: auto 0.25fr .25fr .25fr;
}
```
широкий авто

Ширина 0,25 фр.

Ширина 0,25 фр.

Ширина 0,25 фр.

Вычисления здесь относительно сложны.Во-первых, так как первый размер сетки установлен равнымauto,следовательноfrРазмер оставшегося пространства, необходимого для расчета, равен ширине контейнера сетки за вычетом ширины символов "width auto". Итак, последние 30.25frШирина элемента:(容器宽度 - “宽auto”字符宽度) * 0.25. Тогда оставшийся размер является первой шириной сетки.

2. grid-template-areas

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

Синтаксис следующий:

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

в:

grid-area-name: Имя соответствующей области сетки.
.: Представляет пустую ячейку сетки.
none: Область сетки не определена.

Мы по-прежнему понимаем это свойство CSS на примере. Босс Чжан заключил договор с участком земли, а затем разделил его на 3 * 4 сетки, в общей сложности 12 маленьких сеток, затем босс Чжан хотел посадить виноград в 3 верхних сетках, арбузы в нижних 3 сетках, 6 сеток посередине. , и 2 слева для выращивания омаров. , 4 рыбы справа. Как показано на рисунке ниже:

养殖承包区域划分示意

Соответствующий код CSS выглядит следующим образом:

.container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "葡萄 葡萄 葡萄"
        "龙虾 养鱼 养鱼"
        "龙虾 养鱼 养鱼"
        "西瓜 西瓜 西瓜";
}

Имеется 12 сеток и четыре области, поэтому нашим подэлементам сетки нужно только 4 элемента. HTML выглядит следующим образом:

<div class="container">
    <div class="putao"></div>
    <div class="longxia"></div>
    <div class="yangyu"></div>
    <div class="xigua"></div>
</div>

В настоящее время подэлементы сетки нужно использовать толькоgrid-areaАтрибут указывает, к какой области он принадлежит (поддерживает названия областей на китайском языке):

.putao { grid-area: 葡萄; }
.longxia { grid-area: 龙虾; }
.yangyu { grid-area: 养鱼; }
.xigua { grid-area: 西瓜; }

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

винодельческий район

Район разведения омаров

район рыбного хозяйства

участок выращивания арбузов

Уведомление:Если мы назовем область сетки, но не линию сетки, имя линии сетки будет автоматически сгенерировано на основе имени области сетки.Правило состоит в том, что за именем области следует-startа также-end. Например, если имя области сетки — «Виноград», имя строки столбца слева — «Начало винограда», а имя строки столбца слева — «Конец винограда».

И наша область сетки должна образовывать обычную прямоугольную область, любые L-образные, вогнутые или выпуклые формы не поддерживаются и будут считаться недопустимыми значениями атрибута.

//zxx: В реальной разработке область выращивания винограда — это верхняя часть, область омаров — область боковой панели, область выращивания рыбы — основная область, а область выращивания арбузов — нижняя область.

3. grid-template

grid-templateдаgrid-template-rows,grid-template-columnsа такжеgrid-template-areasАббревиатура собственности.

Синтаксис следующий:

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

вnoneУказывает, что для всех трех свойств CSS заданы исходные значения.

Например, в предыдущем разделе области размножения Босса Чжана используйтеgrid-templateАббревиатура означает:

.container {
    grid-template: 
        "葡萄 葡萄 葡萄" 1fr 
        "龙虾 养鱼 养鱼" 1fr 
        "龙虾 养鱼 养鱼" 1fr 
        "西瓜 西瓜 西瓜" 1fr
        /1fr 1fr 1fr;
}

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

винодельческий район

Район разведения омаров

район рыбного хозяйства

участок выращивания арбузов

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

4. зазор сетки-столбца и разрыв сетки-строки

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

Синтаксис следующий:

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

в:

<line-size>: Размер зазора между сетками.

Пример говоря, учитывая простую сетку 2x2, установите горизонтальные промежутки сетки10px, вертикальное направление15px,следующим образом:

.container {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 2fr;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}

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

5. grid-gap

CSS grid-gapсобственностьgrid-column-gapа такжеgrid-row-gapАббревиатура собственности. Синтаксис следующий:

.container {
    grid-gap: <grid-row-gap> <grid-column-gap>;
}

Сначала горизонтальный ряд, а потом вертикальный столбец, это лучше запомнить, есть старая поговорка: "горизонтальные и вертикальные мертвы", сначала горизонтальные, а затем вертикальные, промежуток между сетками как "десятка" в середине Китайский иероглиф «тянь», написанный согласно китайским иероглифам, сначала горизонтальный, а затем вертикальный, просто запомните.

Например, приведенный выше случай с зазором сетки 2 × 2 также можно записать:

.container {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 2fr;
    grid-gap: 15px 10px;
}

Эффект тот же, и здесь он повторяться не будет.

6. justify-items

justify-itemsОпределяет метод горизонтальной визуализации элементов сетки, будь то растягивание по горизонтали или выравнивание по левому краю, центру и правому краю.Синтаксис следующий:

.container {
    justify-items: stretch | start | end | center;
}

в:

stretch: По умолчанию, растянуть. Заполняется горизонтально.
start: Появляется, когда сетка сжимается по горизонтали до размера содержимого, при этом изображение выравнивается по левому краю вдоль линий сетки (при условии, что направление потока документа не изменилось).
end: Появляется для уменьшения горизонтального размера сетки до размера содержимого, при этом дисплей выравнивается справа от линий сетки (при условии, что направление потока документа не изменилось).
center: Производительность заключается в том, что размер сетки по горизонтали уменьшается до размера содержимого, и в то же время она отображается горизонтально и центрируется в пределах текущей области сетки (при условии, что направление потока документа не изменилось).

Влияние каждого значения атрибута в реальном времени выглядит следующим образом (щелкните переключатель, чтобы испытать эффект расположения различных значений атрибута):

stretch start end center 示意图片1

7. align-items

align-itemsУказывает метод вертикального рендеринга элементов сетки, будь то растягивание по вертикали или выравнивание по верху, середине и низу. Синтаксис следующий:

.container {
    align-items: stretch | start | end | center;
}

Среди них (при условии, что направление потока документов является значением по умолчанию для веб-страницы):

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

stretch start end center 示意图片1

8. place-items

place-itemsможет позволитьalign-itemsа такжеjustify-itemsСвойства записываются в одном объявлении. Синтаксис следующий:

.container {
    place-items: <align-items> / <justify-items>;
}

Здесь порядокalign-itemsспереди,justify-itemsпозади. Первые буквы а, дж, а, дж, а, дж повторяются в устной форме. Вы обнаружили, что произношение похоже на angelababy? Да, помните angelababy, и мы также запомним порядок здесь. Или есть старая поговорка под названием «сочетание вертикали и горизонтали», такого рода выравнивание сетки означает «сочетание вертикали и горизонтали» в ней, вертикали спереди и горизонтали сзади, что тоже может облегчить нашу память.

Говорят, что предыдущая версия Edge15 не поддерживаетplace-itemsАтрибуты (сам не проверял), поэтому если у вас есть проблемы с совместимостью, рекомендуется писать их отдельно.

9. justify-content

justify-contentЗадает горизонтальное распределение элементов сетки. Это свойство действует только тогда, когда общая ширина сетки меньше ширины контейнера сетки. Например, наша сетка имеет фиксированное значение ширины, и в результате остается место. Например:

.container {
    display: grid;
    width: 300px;
    grid-template: 100px 100px/100px 100px;
}

На данный момент как по горизонтали, так и по вертикали остается 100 пикселей,justify-contentАтрибуты пригодятся в этот момент.

Синтаксис следующий:

justify-content: stretch | start | end | center | space-between | space-around | space-evenly;

в:

stretch

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

start

По умолчанию. Логическое значение свойства CSS относительно направления потока документа. Поведение по умолчанию — выравнивание по левому краю.

end

Логическое значение свойства CSS относительно направления потока документа. Поведение по умолчанию — выравнивание по правому краю.

center

Выравнивается по центру.

space-between

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

space-between分布效果示意

space-around

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

space-around分布效果示意

space-evenly

Равномерно означает симметричный и равный. То есть визуально пустое пространство с обеих сторон каждого дочернего элемента flex точно равно. Используйте абстрактную графику следующим образом:

space-evenly分布效果示意

Видеть значит верить, установите соответствующий флажок ниже, чтобы увидеть эффект макета в реальном времени:

stretch start end center space-between space-around space-evenly 示意图片1

CSS, связанный с макетом сетки, в приведенном выше случае и следующем случае:

.container {
    grid-template: auto auto/auto auto;
}

10. align-content

align-contentможно рассматривать какjustify-contentсходные и противоположные свойства,justify-contentУказывает, как дочерние элементы сетки распределяются в горизонтальном направлении, иalign-contentОн показывает распределение элементов сетки в каждой строке по вертикали. Если все дочерние элементы сетки имеют только одну строку, тоalign-contentСвойства не действуют.

Синтаксис следующий:

align-content: stretch | start | end | center | space-between | space-around | space-evenly;

в:

stretch: По умолчанию. Каждый ряд гибких дочерних элементов растягивается пропорционально. Например, если есть два ряда гибких дочерних элементов, каждый ряд будет растягиваться на 50%.
start: Логическое значение свойства CSS относительно направления потока документа. Поведение по умолчанию — верхняя стопка.
end: Логическое значение свойства CSS относительно направления потока документа. Поведение по умолчанию — укладка снизу.
center: Кажется, что он вертикально центрирован в целом.
space-between: Производительность заключается в том, что верхняя и нижняя линии выравниваются с обоих концов. Каждый ряд элементов оставлен, чтобы разделить оставшееся пространство поровну.
space-around: Каждая строка элементов имеет независимое неперекрывающееся белое пространство сверху и снизу.
space-evenly: Каждый ряд элементов полностью делится поровну вверх и вниз.

Видеть значит верить, мы устанавливаем высоту гибкого контейнера на 500 пикселей, а затем щелкаем соответствующий переключатель ниже, чтобы увидеть эффект макета в реальном времени:

stretch start end center space-between space-around space-evenly 示意图片1

11. place-content

place-contentможет позволитьalign-contentа такжеjustify-contentСвойства записываются в объявлении CSS, обычно известном как сокращение. Синтаксис следующий:

.container {
    place-items: <align-content> / <justify-content>;
}

Здесь порядокalign-contentспереди,justify-contentпозади. Первые буквы a, j, a, j, прочитайте несколько раз, это то же произношение, что и angelababy, запомните angelababy и запомните порядок здесь. Или есть старая поговорка под названием "сочетание вертикали и горизонтали". Это распределение сетки имеет значение "сочетания вертикали и горизонтали" в нем. Вертикаль впереди, а горизонталь сзади, что тоже может облегчить нашу память .

Говорят, что Edge15 и его предшественники пока не поддерживаются.place-contentАтрибуты (сам не проверял), поэтому если у вас есть проблемы с совместимостью, рекомендуется писать их отдельно.

12. сетка-авто-столбцы и сетка-авто-строки

Задает размер любых автоматически сгенерированных дорожек сетки (также известных как неявные дорожки сетки). Неявные дорожки создаются, когда элементов сетки больше, чем ячеек в сетке, или когда элементы сетки размещаются за пределами явной сетки.

Используя случай, когда Босс Чжан заключил контракт с землей, объяснение таково:

Земля была поделена.Планировалось разделить на 16 участков под сельское хозяйство.Материалы все закуплены.Оказалось, что законтрактованную землю можно было проставить только в 12 участках.Что мне делать с еще 4 участками? Просто посадите что-нибудь за пределами контрактной земли, не тратьте впустую.
Земля разделена, сверху планируется посадить виноград, а снизу арбузы. Однако при посадке была допущена ошибка, и арбуз был посажен вне законтрактованного участка.

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

//zxx: В макете Grid эти аномальные сетки называются «неявными сетками», а те, которые отображаются в указанном контейнере, называются «явными сетками».

Синтаксис следующий:

.container {
    grid-auto-columns: <track-size> ...;
    grid-auto-rows: <track-size> ...;
}

в:

<track-size>: Разделите размер поля. Может быть значением длины, процентным значением иединица измерения(единица измерения оставшегося пространства в сетке).

Давайте почувствуем это на примереgrid-auto-columnsа такжеgrid-auto-rowsСтилевое представление свойства. CSS выглядит следующим образом:

.container {
    display: grid;
    width: 150px;
    grid-template-columns: 60px 60px;
    grid-template-rows: 30px 90px;
    grid-auto-columns: 60px;
}
.item-a { 
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.item-b { 
    /* 容器水平只有2个格子，但这里设定的是第3个，隐式网格创建 */
    grid-column: 3 / 4;
    grid-row: 2 / 3; 
    background-color: rgba(255,255,0, .5);
}

Эффект в реальном времени выглядит следующим образом:.item-bШирина применяется как60px, иначе ведет себя какauto, вот, жалко дополняет оставшееся30px:

.item-a

.item-b

13. grid-auto-flow

grid-auto-flowСвойство управляет тем, как размещаются дочерние элементы сетки без указания явной позиции. Например, определена сетка 5 * 2 из 10 элементов, всего 5 элементов, 2 из которых определяют, какую сетку вставить, а 3 расположены сами по себе. На данный момент, как расположены эти три элемента, определяетсяgrid-auto-flowКонтроль собственности.

Синтаксис следующий:

.container {
  grid-auto-flow: row | column | row dense | column dense
}

в:

row: По умолчанию. Сетки, не имеющие указанной позиции, в свою очередь, имеют приоритет.
column: Сетки, не имеющие указанной позиции, в свою очередь, имеют приоритет.
dense: плотный в переводе с английского означает плотный. Если есть настройка, значит включен алгоритм "плотной" упаковки для автоматического расположения. Если сетка, появившаяся позже, маленькая, постарайтесь посмотреть, есть ли спереди подходящее место, чтобы сделать сетку максимально плотной и компактной. Значение этого свойства изменяет только визуальный порядок, что приведет к тому, что свойства DOM будут несовместимы с фактическим порядком рендеринга, что неблагоприятно для специальных возможностей и рекомендуется использовать с осторожностью.

Говоря о примерах, известный CSS выглядит следующим образом:

.container{grid-template: 1fr 1fr 1fr/1fr 2fr 2fr 1fr 2fr;}
.item-a { grid-column: 1; grid-row: 2 / 4; }
.item-b { grid-row: 1 / 3; }
.item-c {}
.item-d {}
.item-e {}

то есть.item-a.item-bГоризонтальное положение фиксировано, щелкните параметр ниже, чтобы испытать изменение макета.

row column row dense column dense

.item-a

.item-b

.item-c

.item-d

.item-e

проверилrow, расположенные горизонтально, в это время.item-cОн достаточно высок, чтобы поместиться в верхнюю левую сетку, поэтому визуальный порядок следующий: c, b, d, e.
проверилcolumn, расположенные вертикально, в это время.item-cОн недостаточно широк, чтобы поместиться в верхнюю левую сетку, поэтому визуальный порядок (сверху и снизу, затем слева и справа) следующий: b, c, d, e.
проверилrow dense, расположены горизонтально и просверлены, когда впереди есть место. визуальный порядокrowАтрибуты.
проверилcolumn dense, расположенные вертикально, в это время.item-cОн расположен в верхней левой сетке, поэтому визуальный порядок (вверх и вниз, затем влево и вправо) следующий: c, b, d, e, b и d, расположенные вертикально.

14. grid

представляет собой сокращенный набор всех этих свойств CSS ниже,grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columnsа такжеgrid-auto-flow.

Синтаксис следующий:

```
grid: none
```
noneУказывает, что для всех подсвойств установлены исходные значения.

grid: <grid-template>

а такжеgrid-templateИспользование одинаково. Например это:

.container {
    grid: 100px 300px / 3fr 1fr;
}

эквивалентно следующему:

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

```
grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? 
```
вопросительный знак?Указывает 0 или 1, необязательно. то естьdenseключевые слова иgrid-auto-columnsЗначения можно не указывать.

Конкретные инструкции:
- auto-flow && dense?На самом деле этоgrid-auto-flowстоимость имущества, которая эквивалентнаrowилиcolumnилиrow denseилиcolumn dense.
  
  но здесьrowа такжеcolumnЭти два ключевых слова используютсяauto-flowЭто одно ключевое слово заменяет. Не будет ли это проблемой: когда разбирать наrow, при разборе наcolumnШерстяная ткань?
  
  Собственно, согласноauto-flowОпределяется, находится ли ключевое слово слева или справа от косой черты. еслиauto-flowключевое слово находится слева от косой черты, оно анализируется какrow, если он справа, он разрешаетсяcolumn. Синтаксис здесь находится справа от косой черты, поэтомуgrid-auto-flowрешаетcolumn.
- <grid-auto-columns>Там знак вопроса позади?, поэтому его можно опустить, если опустить, тоgrid-auto-columnsрешаетauto.
Здесь мы изучаем синтаксис в нескольких случаях:
```
.container {
    grid: 100px 300px / auto-flow 200px;
}
```
Приведенный выше код CSS опущен.denseключевое слово, включено<grid-auto-columns>, следовательно, эквивалентен следующему CSS:
```
.container {
    grid-template-rows: 100px 300px;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
}
```
Помните, что в макете «Сетка» передняя часть косой черты — это все свойства, связанные со строками, а задняя часть — все свойства, связанные со столбцами (то же самое ниже).
```
grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>
```
Этот синтаксис похож на приведенный выше, за исключением того, что косой черте предшествует неявная сетка, за которой следует отображение. Здесь из-заauto-flowслева от косой черты, поэтому решаетrow. так:
```
.container {
    grid: auto-flow dense 100px / 1fr 2fr;
}
```
эквивалентен следующему CSS:
```
.container {
    grid-auto-flow: row dense;
    grid-auto-rows: 100px;
    grid-template-columns: 1fr 2fr;
}
```

Первый раз, когда вы изучите синтаксис аббревиатуры атрибута сетки, вы будете немного запутаны: на первый взгляд, голова большая, а все виды символов, кроме букв, такие же, как небесные книги. фактически&,[,],?Эти символы не участвуют в реальном письме, а используются только для представления логики.

Ну пошлите Будду на Запад, я вам окончательно разберусь:

grid:noneТак просто, так удобно, что и не скажешь.
Если компоновка сетки вполне удовлетворительна, ни одна сетка не выходит за пределы контейнера сетки, то естьgrid-templateАтрибуты.
Последние два синтаксиса используются только тогда, когда есть сетка за пределами контейнера сетки илиgrid-template/auto-flow, илиauto-flow/grid-template,Это так просто.

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

3. Свойства CSS, действующие на дочерних элементах сетки

1. сетка-столбец-начало, сетка-столбец-конец, сетка-строка-начало и сетка-строка-конец

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

Так же, как босс Чжан, выращивающий рыбу, он должен уточнить, где пруд начинается с востока, где он идет на запад, где находится юг и где находится север. .

Синтаксис следующий:

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

Разделитель каналов синтаксиса|Средства «или» означает, поэтому не смотрите хорошо на вершине длинного, на самом деле свойство значение, специально:

<number>: Начало и конец, а также первые несколько линий сетки.
<name>: Имя пользовательской линии сетки.
span <number>: Указывает, что текущая сетка будет автоматически охватывать указанное количество сеток.
span <name>: Указывает, что текущая сетка будет автоматически расширяться до тех пор, пока не будет достигнуто указанное имя линии сетки.
auto: Полностью автоматический, включая позиционирование, охват и т. д.

В качестве примера CSS и HTML следующие:

.container {
    grid-template-columns: [第一根纵线] 80px [纵线2] auto [纵线3] 100px [最后的结束线];
    grid-template-rows: [第一行开始] 25% [第一行结束] 100px [行3] auto [行末];
}
.item-a {
    grid-column-start: 2;
    grid-column-end: 纵线3;
    grid-row-start: 第一行开始;
    grid-row-end: 3;
}

<div class="container">
    <div class="item-a"></div>
</div>

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

number: 2
имя: вертикальная линия 2номер: 1 название: начало первой строкиnumber: 3
имя: вертикальная линия 3номер: 3 название: строка 3

.item-a

Каждая линия сетки имеет встроенный<number>, Считая от 1, приведенный выше макет сетки представляет собой сетку из девяти квадратов 3 × 3, поэтому и по горизонтали, и по вертикали — 4 линии сетки (включая края), 4 строки слева направо.<number>Значения в порядке1-4, вертикальное направление аналогично сверху вниз.

В этом примере все линии сетки названы китайскими именами, такими как «первая вертикальная линия», которая является самой левой вертикальной линией сетки. Поэтому конечный эффект понять нетрудно -

grid-column-start:2выражать.item-aЛевая сторона сетки начинается с<number>для2линия;
grid-column-end:纵线3выражать.item-aПравая сторона сетки заканчивается на<name>для纵线3линия;
grid-row-start:第一行开始выражать.item-aНад сеткой начинается в<name>для第一行开始линия;
grid-row-end:3выражать.item-aНиже сетка заканчивается на<number>для3линия.

производительность функции размаха

Давайте посмотрим на это сноваspanРоль ключевых слов. Следующие CSS и HTML:

.item-b {
    grid-column-start: 2;
    grid-column-end: span 纵线3;
    grid-row-start: 第一行开始;
    grid-row-end: span 3;
}

<div class="container">
    <div class="item-b"></div>
</div>

Эффект:

number: 2
имя: вертикальная линия 2номер: 1 название: начало первой строкиnumber: 3
имя: вертикальная линия 3number: 3number: 4

.item-b

Для именованных линий сетки существуютspanи нетspanРазницы нет (включая несколько линий сетки с одинаковым именем), однако для числовых линий сетки можно увидеть разницу, сspanОн указывает количество пролетов, а не порядковый номер линий сетки. Например здесьgrid-row-end:span 3Указывает, что текущая сетка должна покрывать 3 сетки. Итак, мы можем видеть.item-bВысота проходит через весь контейнер сетки.

2. сетка-столбец и сетка-строка

grid-columnа такжеgrid-rowЭто все аббревиатуры, первоеgrid-column-start + grid-column-endАббревиатура от , последнееgrid-row-start + grid-row-endаббревиатура от.

Синтаксис разделен косой чертой, как показано ниже:

.item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

разделитель труб в синтаксисе|Означает «или». потом<start-line>то естьgrid-*-startстоимость имущества,<end-line>то естьgrid-*-endстоимость имущества. Например:

.item-b {
    grid-column: 2 / span 纵线3;
    grid-row: 第一行开始 / span 3;
}

Эквивалентно:

.item-b {
    grid-column-start: 2;
    grid-column-end: span 纵线3;
    grid-row-start: 第一行开始;
    grid-row-end: span 3;
}

3. grid-area

grid-areaУказывает область, занимаемую текущей сеткой. Представлять собойgrid-template-areasКогда атрибут присутствует, это свойство демонстрируется.grid-template-areasсвойство для настройки некоторой области сетки, затем используйтеgrid-areaСвойство позволяет подэлементам сетки указывать использование этих областей, и распределение областей выполняется автоматически.

grid-areaа такжеgrid-column/grid-rowРоль заключается в распределении подэлементов сетки, ноgrid-areaСемантика лучше, распознавание лучше, он очень подходит для областей макета с функциональными атрибутами (такими как голова, низ), и в то же время он также поддерживает неправильные области.

Синтаксис следующий:

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

в:

<name>: Название региона. Зависит отgrid-template-areasсоздание собственности.
<row-start> / <column-start> / <row-end> / <column-end>: Занимает начальную позицию по вертикали и горизонтали области сетки.

<name>См. выше для использования значения атрибутаБосс Чжан разделяет дело о рыбных прудах. Здесь мы демонстрируем следующее разделение области на основе местоположения следующим образом:

.container {
    grid-template: 1fr 1fr 1fr/1fr 1fr 1fr 1fr;
}
.item-c { 
    grid-area: 1 / 2 / 3 / 4;
}

1/2/3/4 дивизия

Указывает, что начальное и конечное положения горизонтальных линий сетки равны 1 и 3 соответственно, а положения вертикальных линий сетки — 2 и 4. Таким образом, вы получите площадь размером 2×2.

4. justify-self

justify-selfПредставляет горизонтальное выравнивание одного элемента сетки. Синтаксис следующий:

.item {
    justify-self: stretch | start | end | center;
}

Где (при условии, что направление потока документов не изменилось):

stretch: По умолчанию, растянуть. Заполняется горизонтально.
start: Появляется, чтобы уменьшить горизонтальный размер сетки до размера содержимого, при этом дисплей выравнивается по левому краю вдоль линий сетки.
end: Появляется, чтобы уменьшить горизонтальный размер сетки до размера содержимого, при этом дисплей выравнивается по правому краю вдоль линий сетки.
center: Производительность заключается в том, что размер сетки по горизонтали уменьшается до размера содержимого, и в то же время она отображается горизонтально и центрируется в текущей области сетки.

stretch start end center 示意图片1

5. align-self

align-selfУказывает метод вертикального рендеринга элементов сетки, будь то растягивание по вертикали или выравнивание по верху, середине и низу. Синтаксис следующий:

.container {
    align-self: stretch | start | end | center;
}

Среди них (при условии, что направление потока документов является значением по умолчанию для веб-страницы):

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

stretch start end center 示意图片1

6. place-self

place-itemsможет позволитьalign-selfа такжеjustify-selfСвойства записываются в одном объявлении. Синтаксис следующий:

.container {
    place-items: <align-self> / <justify-self>;
}

Здесь порядокalign-selfспереди,justify-selfпозади. Первые буквы а, дж, а, дж, а, дж повторяются в устной форме. Вы обнаружили, что произношение похоже на angelababy? Да, помните angelababy, и мы также запомним порядок здесь.

Говорят, что Edge15 и предыдущие версии еще не поддерживаются.place-selfАтрибуты (сам не проверял), поэтому если у вас есть проблемы с совместимостью, рекомендуется писать их отдельно.

4. Другие знания о Сети

В макете сеткиfloat,display:inline-block,display:table-cell,vertical-alignтак же какcolumn-*Эти свойства и объявления не влияют на дочерние элементы сетки. Можно сказать, что это здравый смысл в грид-макетах, об этом часто спрашивают на собеседованиях, так что обязательно запомните.
Макет сетки подходит для крупномасштабного макета (двумерного макета), а макет Flexbox больше всего подходит для компонентов приложения и мелкомасштабного макета (одномерного макета).Статья "display: flex layout tutorial", написанная для меня.
Хотя имя поддерживает китайский язык, из-за риска искажения символов в файлах CSS каждый сам решает, следует ли вводить новшества или быть консервативным.
Хотя IE10-IE15 номинально поддерживает макет Grid, он поддерживает и старую версию грамматики (эта статья посвящена новой грамматике 2.0), и необходимо добавить-ms-Использование частных префиксов, энергетические причины и использование IE глубоко не изучались и будут дополнены в будущем.

Кроме того:

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

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

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

Спасибо за прочтение!

Справочная статья:A Complete Guide to Grid

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

(Конец этой статьи) // Хотите награду? нажмитездесь. Есть что сказать? нажмитездесь.