CSS-GRID
Grid создает сеточную модель. Элементы сетки собираются в контейнере сетки с использованием координат линий сетки.
Вертикальные и горизонтальные пути, строки и столбцы определяются линиями сетки.
Например:
Каждая линия сети имеет свой номер. для них также могут быть определены имена.
Номера вертикальных и горизонтальных линий указаны в нижней и правой частях рисунка.
Например, первая горизонтальная линия отмечена цифрой [ 1 ] и соответствует [-4] в случае отрицательного значения.
Первая вертикальная линия снова отмечена цифрой [1] и для отрицательного значения равна [-6].
Есть четкие и нечеткие сетки.
Հստակ ցանց
Отдельная сетка имеет фиксированное количество линий и путей, которые формируют сетку с помощью grid-template-rows, grid-template-coulmns, grid-template-areas характеристики.
.grid {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: 70px 70px;
grid-gap: 20px;
}
<body>
<section class="grid">
<div class="item">элемент1:</div>
<div class="item">элемент2:</div>
</section>
</body>
На картинке определены два горизонтальных пути — строка и четыре вертикальных пути — столбец, ширина линий равна 20px и имеется два элемента сетки.
Пути сетки можно просмотреть в браузере Firefox Developer Edition следующим образом:
Անհստակ ցանց
Если элементов сетки больше, чем количество блоков, которые вы определили для сетки, или если элемент сетки находится за пределами контейнера сетки, контейнер автоматически подготавливает пути в сетке, добавляя в сетку линии.
.grid {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: 70px 70px;
grid-gap: 20px;
max-width: 800px;
}
.item1 {
grid-column-start: -1;
}
.item2 {
grid-row-start: 4;
}
<body>
<section class="grid">
<div class="item1">элемент1:</div>
<div class="item2">элемент2:</div>
</section>
</body>
Для первого элемента написано: grid-column-start: -1՝ Начало ширины (столбца) элемента сетки будет начинаться со строки [-1] (так же, как [5]).։ Высота и ширина будут определены автоматически.
Для второго элемента написано: grid-row-start: 4՝ Начало высоты (строки) элемента сетки будет начинаться со строки [4]. Горизонтальных линий грида-контейнера — три, а значение — 4. это будет означать добавление еще двух строк за пределами контейнера для размещения второго элемента. Высота и ширина будут определены автоматически.
Оба элемента явно находятся вне грид-контейнера, поэтому у них нет фиксированных размеров, поэтому их сетка будет называться անհստակ ցանց։
Можно контролировать размеры неточных путей вне контейнеров и определять элементы внутри них.
grid-auto-rows և grid-auto-columns Свойства можно использовать для определения размеров неопределенных путей.
.grid {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: 70px 70px;
grid-gap: 20px;
grid-auto-columns: 200px;
grid-auto-rows: 60px;
max-width: 800px;
}
.item1 {
grid-column-start: -1;
}
.item2) {
grid-row-start: 4;
}
<body>
<section class="grid">
<div class="item1">элемент1:</div>
<div class="item2">элемент2:</div>
</section>
</body>
Все нечеткие пути вне сетки всегда будут иметь ширину 200 пикселей и высоту 60 пикселей, независимо от того, соответствуют ли пути контейнера сетки размеру нечетких путей или нет.
Также есть возможность расширить прозрачную сетку дальше, например, сверху.
.grid {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: 100px 100px;
grid-auto-columns: 200px;
grid-auto-rows: 70px;
grid-gap: 20px;
max-width: 800px;
}
.item1 {
grid-row-end: 2;
grid-row-start: span 2;
}
.item2 {
grid-column-end: 2;
grid-column-start: span 2;
}
<body>
<section class="grid">
<div class="item1">элемент1:</div>
<div class="item2">элемент2:</div>
</section>
</body>
Первый элемент определен grid-row-end: 2 և grid-row-start: span 2։ Это будет означать, что концом высоты первого элемента будет 2-я горизонтальная линия, а началом — две линии над ней. Часть элемента, которая явно находится за пределами сетки, имеет размер 70 пикселей. В результате высота элемента составит 170 пикселей.
Определяет второй элемент grid-column-end: 2 և grid-column-start: span 2 ։ Это будет означать, что концом ширины второго элемента будет вторая вертикальная линия, а началом будет две линии слева от нее. Часть элемента, которая явно находится за пределами сетки, имеет размер 200 пикселей. В результате ширина элемента составит 350 пикселей.
Таким образом, были добавлены один горизонтальный и один вертикальный неясные пути. Элементы грида-контейнера будут стандартного размера, а размер элементов в самой верхней строке и крайнем левом столбце можно увеличить согласно примеру, упомянутому ранее.
grid-template-rows
grid-template-rows - определяет строки грида-контейнера (горизонтальные пути), где указывается количество путей, их размер и их имена.
Краткая информация:
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Нет |
| Կիրառվում են | С контейнером типа Grid. |
| Ենթարկվում է անիմացիայի | В некоторой степени |
Значения следующие:
none - указывает, что четкие сетевые пути подготовлены не будут. они будут генерироваться неявно, размер которых будет определяться с помощью Grid-auto-rows.
[գծիԱնվանումը] --grid-container состоит из горизонтальных и вертикальных путей, которые мы получаем через горизонтальные и вертикальные линии, определенные в контейнере. Эти строки пронумерованы. Можно присваивать имена пронумерованным строкам и использовать имена вместо номеров. Для одной строки можно определить более одного имени, отделяя друг от друга запятыми.
Например:
grid-template-rows: [start header-start] 100px [content-start header-end] 1fr [lastline] ՝ название первой горизонтальной линии: [start header-start], высота строки: 100 пикселей. имя следующей горизонтальной линии: [content-start header-end], высота строки: 1фр. название последней горизонтальной линии: [lastline]։
չափմանՄիավորովԱրժեք – значение в одной из единиц измерения. В случае % размер рассчитывается по размеру грида-контейнера. Если он не фиксирован и определяется размером его полос, то рассчитывается процент auto как ценность.
flex-տեսակիՉափմանՄիավոր - единица измерения «фр» принимает только положительное значение. Каждый путь, определенный fr, занимает свободное пространство грида-контейнера в соответствии со своим коэффициентом — номером, указанным для него.
Например: grid-template-rows: 1fr, 2fr, 1fr ՝ свободное пространство контейнера — высота будет разделена на четыре части, и каждой строке будет выделено столько частей, сколько указано в значении. Если контейнер не имеет фиксированного размера, то размер строк (горизонтальных путей), высота станут гибкими, меняясь в зависимости от размера окна браузера.
min-content - высота поля определяется наименьшим элементом его содержимого.
max-content - высота поля определяется наибольшим элементом его содержимого.
minmax() – например: minmax(100px, 300px): минимальная высота поля — 100 пикселей, максимальная — 300 пикселей. первое значение функции не может быть определено единицей измерения fr.
auto - высота данного ящика будет определяться размером его содержимого. Это соответствует minmax(min-content, max-content) к функции со значениями.
fit-content() – значение в одной из единиц измерения. Это соответствует min(max-content, max(auto, հստակՉափ)) к функции со значениями.
Например: fit-content(300px) или: min(max-content, max(auto, 300px)) - первый max(auto, 300px)-выберет из них наибольшее.
Здесь autoбудет соответствовать min-content(но не во всех случаях) и 300px— это определенная нами четкая высота.
Если большее из двух 300pxсделаю выбор в следующем раунде max-contentи 300pxмежду , из которых он выберет наименьшее.
Если самый большой элемент блока (max-contentը) больше чем 300px, тогда не пройдет 300pxпредел
.grid {
display: grid;
border: 2px solid black;
grid-template-columns: [first-line] 300px [line-2] 100px
[line-3] 100px [line-4] 100px
[line-5] 100px [last-line] 100px;
grid-template-rows: fit-content(300px) 100px 100px;
height: 500px;
width: 800px;
background: orange;
}
.itemm {
border: 2px solid black;
}
.item1 {
font-size: 20px;
background: lime;
padding: 5px;
writing-mode: vertical-lr;
}
.item2 {
background: red;
font-size: 20px;
}
<body>
<section class="grid">
<div class="itemm item1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel velit ut tortor lobortis tempus vitae congue felis. Эней
</div>
<div class="itemm item2">элемент2:</div>
<div class="itemm item2">элемент3:</div>
. . .
<div class="itemm item2">пункт 18:</div>
</section>
</body>
repeat() - определяет, сколько линий должно быть и какой высоты они должны быть.
Например:
grid-template-rows: 200px 200px 200px 200px - соответствует: grid-template-rows: repeat(4, 200px) :
Другой пример:
grid-template rows: 150px 200px 250px 300px 150px 200px 250px 300px - это соответствует: grid-template-rows: repeat(8, 150px 200px 250px 300px):
Есть два специальных слова: auto-fill auto-fit․ սրանք հնարավոր է укажите в первом значении функции, которые отвечают за количество строк.
auto-fill –например grid-template-rows: repeat(auto-fill, 100px) - если grid высота контейнера равна 550px, количество строк будет 5, потому что 5 строк высотой 100px могут поместиться в 550px. Поэтому они будут определены так много горизонтальные пути, столько, сколько поместится в грид-контейнере.
auto-fit - пример: grid-template-rows: repeat(auto-fit, 100px) - если grid высота контейнера равна 550px, количество строк будет столько, сколько необходимо для размещения всех элементов сетки; это не приведет к установке избыточных путей.
Есть некоторые ограничения repeat() использовать функцию:
1.repeat() в функции не будет определено повторение().
2.repeat() второе значение в функции не будет установлено fr с единицей измерения, если указана первая auto-fill или auto-fit։
3.grid-template-rows , повтор() не будет определен дважды, если указано первое значение для обоих auto-fill или auto-fit։
.grid {
display: grid;
border: 2px solid black;
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: repeat(auto-fill, 150px);
height: 600px;
width: 1000px;
background: orange;
}
.itemm {
border: 2px solid black;
background: red;
font-size: 20px;
}
<body>
<section class="grid">
<div class="itemm">элемент1:</div>
<div class="itemm">элемент2:</div>
<div class="itemm">элемент3:</div>
. . .
<div class="itemm item2">пункт 10:</div>
</section>
</body>
Грид-контейнер имеет 5 вертикальных и 4 горизонтальных пути, что в общей сложности составляет 20 блоков, хотя элементов сетки всего 10.
Остальные 10 пустых полей, два горизонтальных пути, подготавливаются, как указано в функции повторения(). auto-fill ценить.
Синие линии нарисованы отдельно, чтобы сделать добавленную часть более четкой.
subgrid - в грид-контейнере можно определить еще один грид-контейнер.
Это происходит subgrid , что позволяет дочернему контейнеру внутри использовать строки пути, определенные родительским контейнером.
Таким образом, элементы дочернего контейнера будут иметь размеры, определенные для путей родительского контейнера.
Это значение в настоящее время поддерживается только Firefox браузером.
.grid {
display: grid;
border: 2px solid black;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
background: orange;
width: 1200px;
height: 600px;
grid-gap: 20px;
}
.itemm {
border: 2px solid black;
background: white;
font-size: 20px;
grid-row: 1/-1;
}
.subgridd {
display: grid;
grid-template-rows: subgrid;
grid-row: 3/-1;
grid-gap: 20px;
background: orange;
}
.subitem {
border: 1px solid black;
background: white;
}
<body>
<section class="grid">
<div class="itemm">элемент1:</div>
<div class="itemm subgridd">
<div class="subitem">элемент3:</div>
<div class="subitem">пункт 4:</div>
</div>
<div class="itemm">пункт5:</div>
<div class="itemm">пункт 6:</div>
</section>
</body>
grid-row: 1/-1 –Высота элементов сетки (пунктов) должна начинаться с первой строки и заканчиваться на последней строке ([5] совпадает с [-1]).
grid-row: 3/-1 –высота дочернего грида-контейнера (subgridd) должна начинаться с третьей строки и заканчиваться на последней строке ([5] — то же самое, что [-1]).
Таким образом, второй элемент сетки стал контейнером сетки, а его элементы сетки располагались начиная с третьей строки.
Номера строк дочерних и родительских грид-контейнеров различны. Номер строки родительского грида-контейнера начинается с [ 1 ]. Дочерний грид-контейнер также начинается с [ 1 ], хотя он начинается на третьей строке родительского грид-контейнера. Таким образом, размер элемента сетки дочернего грид-контейнера будет определяться, начиная с [1], а не с [3].
Невозможно добавить неточные пути в дочерний грид-контейнер. Если добавляется элемент сетки, для которого нет свободного места в дочернем контейнере сетки, он будет расположен на элементе сетки родительского контейнера сетки.
masonry — если грид-элементы имеют разную высоту, то с помощью грид-контейнера мы получим следующее изображение:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(120px, 1fr));
background: orange;
width: 600px;
}
.item {
border: 2px solid black;
background: red;
font-size: 20px;
}
<body>
<div class="grid">
<div class="item" style="block-size: 2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 1.6em;"></div>
<div class="item" style="block-size: 4em;"></div>
<div class="item" style="block-size: 2.2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 4.5em;"></div>
<div class="item" style="block-size: 1em;"></div>
<div class="item" style="block-size: 3.5em;"></div>
<div class="item" style="block-size: 2.8em;"></div>
</div>
</body>
Элементы сетки располагаются по горизонтальным линиям. masonry(буквально стена, когда камни располагаются друг на друге, или рядом друг с другом как можно плотнее) смысл значения в том, чтобы расположить элементы сетки друг под другом как можно плотнее.
masonry Результат значения:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: masonry;
background: orange;
width: 600px;
}
.item {
border: 2px solid black;
background: red;
font-size: 20px;
}
<body>
<div class="grid">
<div class="item" style="block-size: 2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 1.6em;"></div>
<div class="item" style="block-size: 4em;"></div>
<div class="item" style="block-size: 2.2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 4.5em;"></div>
<div class="item" style="block-size: 1em;"></div>
<div class="item" style="block-size: 3.5em;"></div>
<div class="item" style="block-size: 2.8em;"></div>
</div>
</body>
Это значение поддерживается только Firefox Developer Edition браузером при активации layout.css.grid-template-masonry-value.enabled параметр (подробнее о Firefox Developer Edition и этом параметре вы можете узнать в Интернете).
В настоящее время это значение является экспериментальным и не поддерживается браузерами.
Мы можем добиться такого результата только с помощью Javascript.
grid-template-columns
grid-template-columns — определяет столбцы грида-контейнера (вертикальные пути), где указывается количество путей, их размер и их названия.
Краткая информация:
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Нет |
| Կիրառվում են | С контейнером типа Grid. |
| Ենթարկվում է անիմացիայի | В некоторой степени |
Значения следующие:
none - указывает, что свободные сетевые пути не будут подготовлены. они будут происходить косвенно, размер которых будет определен grid-auto-columnsчерез
[գծիԱնվանումը] –grid— контейнер состоит из горизонтальных и вертикальных путей, которые мы получаем через горизонтальные и вертикальные линии, определенные в контейнере. Эти строки пронумерованы. Пронумерованным строкам можно присваивать имена и использовать их вместо чисел. Одной строке может быть присвоено более одного имени, разделенного запятыми. разделенный։
Например:
grid-template-columns: [start menu-start] 100px [content-start menu-end] 1fr [lastline]՝ название первой вертикальной линии: [start menu-start], ширина линии: 100 пикселей. Имя следующей вертикальной линии: [content-start menu-end], ширина линии: 1фр. Название последней вертикальной линии: [lastline]։
չափմանՄիավորովԱրժեք – значение в одной из единиц измерения. В случае % размер рассчитывается по размеру грида-контейнера. Если его размер не фиксирован и определяется размером его полос, процент обрабатывается как auto ценить.
flex-տեսակիՉափմանՄիավոր - " fr "Единица измерения принимает только положительное значение. Каждый путь, определяемый fr, занимает свободное пространство грида-контейнера в соответствии со своим коэффициентом — номером, указанным для него.
Например: grid-template-columns: 1fr, 2fr, 1fr – свободное пространство контейнера по ширине будет разделено на четыре части, и каждой строке будет выделено столько частей, сколько указано в значении. Если контейнер не имеет фиксированного размера, то размер колонок (вертикальных путей), ширина, станет гибкой, изменяясь в зависимости от размера окна браузера.
min-content – ширина данного поля определяется наименьшим элементом его содержимого.
max-content – ширина данного поля определяется наибольшим элементом его содержимого.
minmax() - например minmax(100px, 300px) — минимальная ширина поля — 100 пикселей, максимальная — 300 пикселей. Первое значение функции не может быть установлено fr с единицей измерения.
auto - ширина данного ящика будет определяться размером его содержимого. Это подходит minmax(min-content, max-content) к функции со значениями.
fit-content() – значение в одной из единиц измерения.
Это соответствует max(min-content, min(հստակՉափ, max-content)) к функции со значениями.
Например: fit-content(500px) или: max(min-content, min(500px, max-content)) - первый min(500px, max-content)-выберет из них самый маленький.
Здесь 500 пикселей — это установленная нами чистая ширина. Если меньший из двух 500pxсделаю выбор в следующем раунде min-contentи 500pxмежду, из которых он выберет самый большой.
Если наименьший элемент содержимого поля (min-content) меньше, чем 500px, то ширина коробки не превысит 500pxпредел
.grid {
display: grid;
border: 2px solid black;
grid-template-columns: fit-content(300px) 100px 100px 100px 100px 100px;
grid-template-rows: [first-line] 200px [line-2] 150px [line-3] 150px;
height: 500px;
width: 800px;
background: orange;
}
.itemm {
border: 2px solid black;
}
.item1 {
font-size: 20px;
background: lime;
padding: 5px;
}
.item2 {
background: red;
font-size: 20px;
}
<body>
<section class="grid">
<div class="itemm item1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel velit ut tortor lobortis tempus vitae congue felis. Эней
</div>
<div class="itemm item2">элемент2:</div>
<div class="itemm item2">элемент3:</div>
. . .
<div class="itemm item2">пункт 18:</div>
</section>
</body>
repeat() - определяет количество и ширину столбцов.
Например: grid-template-columns: 200px 200px 200px 200px соответствует: grid-template-columns: repeat(4, 200px) :
Другой пример: grid-template columns: 150px 200px 250px 300px 150px 200px 250px 300px - это соответствует: grid-template-columns: repeat(8, 150px 200px 250px 300px):
Есть два специальных слова: auto-fill auto-fit, которые указаны в первом значении функции и отвечают за количество столбцов.
auto-fill - например grid-template-columns: repeat(auto-fill, 100px) - если grid ширина контейнера равна 550px, количество столбцов будет 5, потому что 550px Grid-контейнер width будет занимать 5 столбцов шириной 100px, то есть вертикальных путей будет определено столько, сколько вместит грид-контейнер.
auto-fit - например grid-template-columns: repeat(auto-fit, 100px) - если ширина грид-контейнера равна 550px, то количество столбцов будет столько, сколько необходимо для размещения всех грид-элементов, то есть не будут определены лишние пути.
Есть некоторые ограничения repeat() использовать функцию:
1. repeat() в функции не будет определено повторение().
2. repeat() второе значение функции не может быть установлено fr с единицей измерения, если указано первое значение auto-fill или auto-fit։
3. grid-template-columns-который дважды repeat() не будет установлен, если указано в качестве первого значения для обоих auto-fill или auto-fit։
.grid {
display: grid;
border: 2px solid black;
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: repeat(5, 100px);
grid-auto-flow: column;
height: 500px;
width: 800px;
background: orange;
}
.itemm {
border: 2px solid black;
background: red;
font-size: 20px;
}
<body>
<section class="grid">
<div class="itemm">элемент1:</div>
<div class="itemm">элемент2:</div>
<div class="itemm">элемент3:</div>
. . .
<div class="itemm">пункт 10:</div>
</section>
</body>
Грид-контейнер имеет 4 вертикальных и 5 горизонтальных путей, что составит 20 блоков, хотя элементов сетки всего 10.
Остальные 10 пустых коробок, две вертикальные дорожки, были созданы потому, что repeat() указывается в функции auto-fill ценить.
Синие линии нарисованы отдельно, чтобы сделать добавленную часть более четкой.
subgrid - в грид-контейнере можно определить дочерний грид-контейнер.
Это происходит subgrid , что позволяет дочернему контейнеру внутри использовать строки пути, определенные родительским контейнером.
Таким образом, элементы дочернего контейнера будут иметь размеры, определенные для путей родительского контейнера.
Это значение в настоящее время поддерживается только Firefox браузером.
.grid {
display: grid;
border: 2px solid black;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
background: orange;
width: 500px;
height: 800px;
}
.itemm {
border: 2px solid black;
background: white;
font-size: 20px;
grid-column: 1/-1;
}
.subgridd {
display: grid;
grid-template-column: subgrid;
grid-row: 3/-1;
grid-gap: 20px;
background: orange;
}
.subitem {
border: 1px solid black;
background: white;
}
<body>
<section class="grid">
<div class="itemm">элемент1:</div>
<div class="itemm subgridd">
<div class="subitem">элемент3:</div>
<div class="subitem">пункт 4:</div>
</div>
<div class="itemm">пункт5:</div>
<div class="itemm">пункт 6:</div>
</section>
</body>
grid-column: 1/-1 –Ширина элементов сетки (пунктов) должна начинаться с первой строки и заканчиваться на последней строке ([5] — то же самое, что [-1]).
grid-column: 3/-1 –ширина подсетки-контейнера (subgridd) должна начинаться с третьей строки и заканчиваться на последней строке ([5] — то же самое, что [-1]).
Таким образом, второй элемент сетки стал контейнером сетки, а его элементы сетки располагались начиная с третьей строки.
Номера строк дочерних и родительских грид-контейнеров различны. Номер родительской строки начинается с [ 1 ]. Dustry также начинается с [ 1 ], хотя он начинается на третьей строке родительского грида-контейнера.
Таким образом, если необходимо определить размер грид-элемента дочернего грид-контейнера, он будет начинаться с [1], а не с [3].
Невозможно добавить неточные пути в дочерний грид-контейнер. Если добавляется грид-элемент, для которого нет свободного места в дочернем грид-контейнере, то он будет расположен на грид-элементе родительского грид-контейнера.
masonry — если грид-элементы имеют разную ширину, то с помощью грид-контейнера мы получим следующее изображение:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(120px, 1fr));
background: orange;
width: 600px;
height: 500px;
}
.item {
border: 2px solid black;
background: red;
font-size: 20px;
writing-mode: vertical-lr;
}
<body>
<div class="grid">
<div class="item" style="block-size: 2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 1.6em;"></div>
<div class="item" style="block-size: 4em;"></div>
<div class="item" style="block-size: 2.2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 4.5em;"></div>
<div class="item" style="block-size: 1em;"></div>
<div class="item" style="block-size: 3.5em;"></div>
<div class="item" style="block-size: 2.8em;"></div>
</div>
</body>
Элементы сетки располагаются по вертикальным линиям.
masonry(буквально стена, когда камни располагаются лицом к лицу, или рядом друг с другом как можно плотнее) смысл значения: элементы сетки должны располагаться рядом друг с другом как можно плотнее.
masonry Результат значения:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: masonry;
grid-template-rows: repeat(auto-fill, minmax(120px, 1fr));
background: orange;
width: 600px;
}
.item {
border: 2px solid black;
background: red;
font-size: 20px;
writing-mode: vertical-lr;
}
<body>
<div class="grid">
<div class="item" style="block-size: 2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 1.6em;"></div>
<div class="item" style="block-size: 4em;"></div>
<div class="item" style="block-size: 2.2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 4.5em;"></div>
<div class="item" style="block-size: 1em;"></div>
<div class="item" style="block-size: 3.5em;"></div>
<div class="item" style="block-size: 2.8em;"></div>
</div>
</body>
Это значение поддерживается только Firefox Developer Edition браузером при активации layout.css.grid-template-masonry-value.enabled параметр (подробнее о Firefox Developer Edition и этом параметре вы можете узнать в Интернете).
В настоящее время это значение является экспериментальным и не поддерживается браузерами.
Мы можем добиться такого результата только с помощью Javascript.
grid-template-areas grid-area
определяет имя определенной области в грид-контейнере (любой блок или несколько блоков вместе).
Определяемая область должна быть прямоугольной, вертикальной или горизонтальной, то есть она не может иметь Т-образную или любую другую форму.
grid-areaотмечено grid-элемент и определен для него grid-template-areasимя, упомянутое в
Краткая информация:
| Նախասահմանված արժեքը | grid-template-areas: none область сетки: auto (потому что мы можем установить свойства Grid-row/column-start/end как значения) |
| Ժառանգվում են | Нет |
| Կիրառվում են | grid-template-areas с контейнером сетчатого типа. grid-area - в случае с элементом сетчатого типа. |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
none — указывает, что в контейнере сетки не определено пространство имен.
որևէԱնվանում –для областей шаблонов сетки определяет определение определенной области в грид-контейнере. В случае Grid-area элементу присваивается имя области.
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "headerr headerr"
"sidebarr mainn";
background: orange;
width: 600px;
height: 500px
}
.item {
border: 2px solid black;
background: red;
font-size: 20px;
}
.item1 {
grid-area: headerr;
}
.item2 {
grid-area: sidebarr;
}
.item3 {
grid-area: mainn;
}
<body>
<div class="grid">
<div class="item item1">элемент1:</div>
<div class="item item2">элемент2:</div>
<div class="item item3">элемент3:</div>
</div>
</body>
grid-template-areas Свойство определяет, что контейнер должен иметь два горизонтальных и два вертикальных пути.
Есть две пары слов, разделенные кавычками: два горизонтальных и два вертикальных пути, каждый с двоичным полем.
Каждая часть, разделенная кавычками, представляет собой определение новой строки.
Каждое слово в кавычках представляет один блок. Таким образом определено: в первом горизонтальном пути элемент сетки должен занимать два блока, поскольку имена блоков одинаковы («headerr headerr»). Во втором горизонтальном направлении должно быть два элемента сетки, каждый из которых будет занимать одно поле («sidebar mainn»).
Чтобы элементы сетки занимали определенные для них области, в каждом элементе будет использоваться grid-area свойство, которое будет содержать название области, которая будет к нему применяться.
Треки будут иметь четкий размер grid-template-rows և grid-template-columns через свойства.
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "headerr headerr"
"sidebarr mainn";
grid-template-columns: 1fr 2fr;
background: orange;
width: 600px;
height: 500px
}
Чтобы ящики были объединены в одну область, им присваиваются одинаковые имена:
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "headerr headerr mainn"
"headerr headerr mainn";
background: orange;
width: 600px;
height: 500px
}
.item {
border: 2px solid black;
background: pink;
font-size: 20px;
}
.item1 {
grid-area: headerr;
}
.item2 {
grid-area: mainn;
}
Определенные области должны быть прямоугольными. Поэтому их нельзя определить как:
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "headerr headerr mainn"
"headerr mainn mainn";
background: orange;
width: 600px;
height: 500px
}
Если оставить любое поле пустым, вместо имени будет использоваться точка (или точки).
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "headerr headerr headerr"
"sidebarr mainn mainn"
". footerr footerr";
background: orange;
width: 600px;
height: 500px
}
.item {
border: 2px solid black;
background: pink;
font-size: 20px;
}
.item1 {
grid-area: headerr;
}
.item2 {
grid-area: sidebarr;
}
.item3 {
grid-area: mainn;
}
.item4 {
grid-area: footerr;
}
Количество имен в строках должно быть одинаковым. То есть не может быть:
.grid {
display: grid;
grid-gap: 10px;
grid-template-areas: "headerr headerr headerr"
"sidebarr mainn mainn"
"footerr footerr" ;
background: orange;
width: 600px;
height: 500px
}
В начале имени нельзя использовать цифру, но можно указать цифровой код.
Например:
grid-template-areas: “1rst second third” ; – этот пример неправильный.
Вместо этого имя будет определено как:
grid-template-areas: “\31rst second third”;
Имя области также можно указать с помощью названий строк, но они должны заканчиваться start և end в словах:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: [headerr-start] 400px [headerr-end] 1fr;
grid-template-rows: [headerr-start] 200px [headerr-end] 1fr;
background: orange;
width: 600px;
height: 500px
}
.item {
border: 2px solid black;
background: pink;
font-size: 20px;
}
.item1 {
grid-area: headerr;
}
.item2 { /*երկրորդ արկղը չի դիրքավորվել ըստ անվանումների,
այլ՝ սովորականի պես*/
background: red;
}
grid-areaтоже могу принять grid-row-start, grid-column-start, grid-row-end և grid-column-end характеристики. Последовательность та же, что была упомянута ранее.
.item {
grid-area: 1 / col-4 / row-4 / 6;
}
grid-auto-rows grid-auto-columns
grid-auto-rows grid-auto-columns - определяет размер неопределенных горизонтальных (строки) и вертикальных (столбцы) путей.
Краткая информация:
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Нет |
| Կիրառվում են | С контейнером типа Grid. |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
չափմանՄիավորով – значение в одной из единиц измерения. В случае % размер рассчитывается по размеру элемента блочного типа, в котором находится грид-контейнер. Если размер блока не фиксирован, обрабатывается процент auto как ценность.
flex-տեսակիՉափմանՄիավոր - единица измерения «фр» принимает положительное значение. Каждый нечеткий путь, определенный fr, занимает свободное пространство элемента типа блока в соответствии с его коэффициентом, числом, указанным для него.
Например: grid-auto-rows: 1fr, 2fr, 1fr – свободное пространство блока будет разделено на четыре части и каждой строке будет выделено столько частей, сколько указано в значении. Если блок не имеет фиксированного размера, размер, высота или ширина строк (горизонтальные пути) или столбцов (вертикальные пути) будут гибкими, меняясь в зависимости от размера окна браузера.
min-content - высота или ширина данного поля определяется наименьшим элементом его содержимого.
max-content – высота или ширина данного поля определяется наибольшим элементом его содержимого.
minmax() - например minmax(100px, 300px), — минимальная высота или ширина поля должна составлять 100 пикселей, максимальная высота или ширина — 300 пикселей. первое значение функции не может быть установлено fr с единицей измерения.
auto - высота или ширина данного ящика будет определяться размером его содержимого. Это подходит minmax(min-content, max-content) к функции со значениями.
fit-content() - значение в одной из единиц измерения.
Это соответствует min(max-content, max(auto, հստակՉափ)) к функции со значениями.
Например: min(max-content, max(auto,300px)) - первый max(auto, 300px)-выберем среди них самый крупный, где autoбудет соответствовать min-content(но не во всех случаях) и 300px— это определенная высота или ширина, определенная нами.
Если больший из двух значений равен 300 пикселей, он уже сделает выбор в следующем раунде. max-contentи 300pxмежду , из которых он выберет наименьшее. Если высота самого большого элемента коробки (max-content-ը) или ширина (max-content-ը) больше 300 пикселей, то размер поля не будет превышать 300 пикселей.
Если элементов сетки больше, чем количество блоков, определенных для сетки, или если элемент сетки находится за пределами контейнера сетки, контейнер автоматически подготавливает пути в сетке, добавляя в нее линии.
.grid {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: 70px 70px;
grid-gap: 20px;
max-width: 800px;
}
.item1 {
grid-column-start: -1;
}
.item2 {
grid-row-start: 4;
}
<body>
<section class="grid">
<div class="item1">элемент1:</div>
<div class="item2">элемент2:</div>
</section>
</body>
Для первого элемента написано: grid-column-start: -1՝ Начало ширины (столбца) элемента сетки будет начинаться со строки [-1] (так же, как [5]).։ Высота и ширина будут определены автоматически.
Для второго элемента: grid-row-start: 4՝ Начало высоты (строки) элемента сетки будет начинаться со строки [4].
Горизонтальных линий грида-контейнера — три, а значение — 4. Это будет означать добавление еще двух строк за пределами контейнера для размещения второго элемента. Высота и ширина будут определены автоматически.
Оба элемента находятся вне грид-контейнера, поэтому не имеют фиксированных размеров, поэтому их сетка будет называться անհստակ ցանց։
Размерами нечетких путей вне контейнера можно управлять. grid-auto-rows և grid-auto-columns через свойства.
.grid {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: 70px 70px;
grid-gap: 20px;
grid-auto-columns: 200px;
grid-auto-rows: 60px;
max-width: 800px;
}
.item1 {
grid-column-start: -1;
}
.item2) {
grid-row-start: 4;
}
<body>
<section class="grid">
<div class="item1">элемент1:</div>
<div class="item2">элемент2:</div>
</section>
</body>
Все нечеткие пути вне сетки всегда будут иметь ширину 200 пикселей и высоту 60 пикселей, независимо от того, соответствуют ли пути контейнера сетки размеру нечетких путей или нет.
Ширина первого элемента составляет 200 пикселей, а высота соответствует высоте элементов контейнера сетки.
Высота второго элемента составляет 60 пикселей, а ширина соответствует ширине элементов контейнера сетки.
grid-auto-flow
grid-auto-flow - когда элементы сетки помещаются в коробки-сетки-контейнеры, они располагаются рядом, слева направо и горизонтально. все заняв ящики, они переходят на следующую линию.
Благодаря этой функции можно располагать элементы друг под другом сверху вниз и вертикально. все заняв ящики, они перейдут к следующему столбцу.
Краткая информация:
| Նախասահմանված արժեքը | row |
| Ժառանգվում են | Нет |
| Կիրառվում են | С контейнером типа Grid. |
| Ենթարկվում է անիմացիայի | Да |
Значения следующие:
row – когда элементы сетки помещаются в блоки-контейнеры сетки, они выравниваются слева направо и по горизонтали. все заняв ящики, они переходят на следующую линию.
column – когда грид-элементы помещены в грид-контейнеры, они располагаются друг под другом сверху вниз и вертикально. все заняв ящики, они переходят к следующему столбцу.
row dense или column dense - указывает, что поля, оставленные пустыми, также должны быть заняты.
columnв случае
#myid {
display: grid;
background: #CCCCCC;
border: 3px solid lime;
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
#myid>div {
background-image: linear-gradient(135deg, #35c34d, #313131);
font-size: 30px;
}
#myid>div:nth-of-type(1) {
background-image: linear-gradient(135deg, #ff0000, #353535);
grid-row-start: 2;
}
<!DOCTYPE html>
<html>
<head>
<title>HAYTI</title>
</head>
<body>
<div id="myid">
<div>столбец1:</div>
<div>столбец2:</div>
<div>столбец3:</div>
<div>столбец4:</div>
<div>столбец5:</div>
<div>столбец6:</div>
<div>столбец7:</div>
<div>столбец8:</div>
<div>столбец9:</div>
</div>
</body>
</html>
Поскольку первый элемент должен быть расположен во второй строке (grid-row-start: 2;), остальные элементы продолжат работу после него. В результате первый блок останется пустым, а значит, последний элемент вышел за пределы контейнера сетки и расположился в непонятной области.
column dense ибо это результат
#myid {
display: grid;
background: #CCCCCC;
border: 3px solid lime;
grid-auto-flow: column dense;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
Первый элемент располагается во второй строке (grid-row-start: 2;). остальные элементы последуют за этим. В результате первое поле должно остаться пустым, но column dense благодаря этому он тоже был занят.
row-gap( կամ grid-row-gap) column-gap( կամ grid-column-gap) grid-gap gap
Grid-Container устанавливает расстояние между ящиками по горизонтали (row-gap) и вертикально (column-gap) направления или оба вместе (grid-gap или gap):
grid-gap, если указано одно значение, оно будет применяться к обоим направлениям: сначала столбцам, затем строкам.
Краткая информация:
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Нет |
| Կիրառվում են | Для контейнера типа Grid можно использовать как с частицей Grid, так и без нее. |
| Ենթարկվում է անիմացիայի | Да |
Значения следующие:
normal – устанавливает размер браузера по умолчанию 1em.
չափմանՄիավորովԱրժեք - значение в одной из единиц измерения.
.grid {
display: grid;
grid-gap: 10px 10px;
grid-template-columns: repeat(3, 193px);
grid-template-rows: repeat(4, 100px);
background: orange;
width: 600px;
height: 430px;
}
.item {
border: 2px solid black;
background: red;
font-size: 20px;
}
grid
grid – универсальное свойство, принимающее разные наборы значений:
Строки шаблона сетки/столбцы шаблона сетки
grid-template-areas
строки шаблона сетки/автоматические столбцы сетки
автоматический поток строк сетки-автоматических/столбцов сетки-шаблона
Значения следующие:
none – устанавливает для всех свойств, указанных в сетке, значения по умолчанию.
grid-template-rows / grid-template-columns в случае
.container {
grid: 100px 300px / 3fr 1fr;
}
такой же как
.container {
grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
}
Для неуказанных значений устанавливаются значения по умолчанию.
grid-template-rows / auto-flow grid-auto-columns – когда правая сторона также определена auto-flowзатем grid-template-columnsбудет использоваться вместо grid-auto-columns, и сетка-Значение автопотока будет равно столбцу.
.container {
grid: 100px 300px / auto-flow 200px;
}
такой же как
.container {
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}
или:
.container {
grid: 100px 300px / auto-flow dense 200px;
}
такой же как
.container {
grid-template-rows: 100px 300px;
grid-auto-flow: column dense;
grid-auto-columns: 200px;
}
Для неуказанных значений устанавливаются значения по умолчанию.
auto-flow grid-auto-rows / grid-template-columns – при установке слева auto-flow-а потом grid-template-rowsбудет использоваться вместо grid-auto-rows-ը։
.container {
grid: auto-flow dense 200px / 200px 1fr;
}
такой же как
.container {
grid-auto-flow: row dense;
grid-auto-rows: 200px;
grid-template-columns: 200px 1fr;
}
Для неуказанных значений устанавливаются значения по умолчанию.
grid-template-areas grid-template-rows / grid-template-columns в случае
.container {
grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
такой же как
.container {
grid-template-areas:
"header header header"
"footer footer footer";
grid-template-rows:
[row1-start] 1fr [row1-end row2-start]
25px [row2-end];
grid-template-columns: auto 50px auto;
}
Для неуказанных значений устанавливаются значения по умолчанию.
grid-template
grid-template – является универсальным свойством и принимает три значения՝ grid-template-areas, grid-template-rows, grid-template-columns:
Краткая информация:
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Нет |
| Կիրառվում են | С контейнером типа Grid. |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
none – устанавливает для всех значений свойств значение none.
grid-template-rows / grid-template-columns в случае
.container {
grid-template: 100px auto 200px / 1fr 70px auto ;
}
grid-template-areas grid-template-rows / grid-template-columns в случае
.container {
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
такой же как
.container {
grid-template-rows:
[row1-start] 25px [row1-end row2-start]
25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}
grid-row-start grid-row-end grid-row grid-column-start grid-column-end grid-cloumn
Grid-container определяет местоположение и размер элемента сетки, используя номера строк или имена Grid-контейнера.
grid-row-start, grid-row-end և grid-row высота элемента определяется посредством - он будет начинаться с лозы и заканчиваться лозой, или и то, и другое вместе (сетка-строка).
grid-column-start, grid-column-end և grid-column –Ширина элемента определяется посредством того, с какого столбца он будет начинаться и каким столбцом заканчиваться, или с помощью того и другого вместе (grid-column).
Краткая информация:
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Нет |
| Կիրառվում են | с элементом типа Grid. |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
գծիԱնվանումըԿամՀամարը – может быть определено по имени или номеру линии.
span համարը – элемент займет указанное количество горизонтальных или вертикальных прямоугольников.
span անվանումը – элемент будет занимать столько горизонтальных или вертикальных прямоугольников, пока не достигнет строки, имя которой указано в значении.
auto – устанавливает автоматическое размещение, равное размеру одного ящика.
.item {
grid-column-start: 2;
grid-column-end: col-5;
grid-row-start: row-1;
grid-row-end: 3;
}
.item {
grid-column-start: 1;
grid-column-end: span col-4;
grid-row-start: 2;
grid-row-end: span 2;
}
grid-row և grid-column будет:
.item-c {
grid-column: 3 / span 2;
grid-row: row-3 / 4;
}
Элементы могут располагаться друг над другом.
С использованием " z-index » свойство, будет определена последовательность перекрывающихся элементов.
justify-content
justify-content – контейнер типа сетки (display: grid;) устанавливает положение содержимого Grid-контейнера по горизонтали (будет использоваться для определения положения содержимого Grid-контейнера по вертикали) align-content свойство).
Чтобы это заметить, необходимо, чтобы контейнер сетки был меньше общих размеров его родительского элемента блочного типа.
Краткая информация:
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Нет |
| Կիրառվում են | с контейнером типа сетки. |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
| Արժեքը | Դիրքը | Предыдущий |
|---|---|---|
start |
 |
Содержимое сортируется по порядку, начиная с левого угла родительского элемента.
|
center |
 |
Содержимое сортируется по порядку, начиная с середины родительского элемента.
|
end |
 |
Содержимое сортируется по порядку, начиная с правого угла родительского элемента.
|
space-between |
 |
Содержимое выравнивается равномерно по всей строке. первый и последний элементы располагаются в самом начале и самом конце строки.
|
space-around |
 |
Содержимое выравнивается равномерно по всей строке. Перед первым элементом и после последнего элемента имеется пустое пространство, каждый из которых равен половине свободного пространства между соседними элементами.
|
space-evenly |
 |
Содержимое располагается равномерно по всей строке так, чтобы пространство между соседними элементами, а также свободное пространство перед первым элементом и после последнего элемента были равными.
|
start և end – контент расположен горизонтально.
Если направление: равно "лтр", startрасположит контент в левом углу, и endв правом углу. Если: направление: равен «rtl»., startв случае Контент будет расположен в правом углу, и endв левом углу.
left և right –Контент позиции влево или вправо, независимо от значения свойства направления.
normal –Контент располагается на своем обычном месте, как если бы оно не было установлено justify-content свойство.
stretch – если ширина столбцов (grid-template-columns) установлена на auto и общая ширина столбцов (т.е. ширина Grid-контейнера) меньше ширины блочного элемента (элемента, в котором Grid-container находится), то элементы Grid будут равномерно расширяться в соответствии со свободным пространством Grid-контейнера (а не родительского элемента).
#example {
display: grid;
grid-template-columns: repeat(4, 120px);
grid-template-rows: repeat(1, 100px);
justify-content: end;
grid-gap: 10px;
background-color: #ccc;
border: 2px solid black;
width: 780px;
height: 430px;
}
.one {
background-color: #38c700;
}
.two {
background-color: #38c700;
}
.three {
background-color: #38c700;
}
.four {
background-color: #38c700;
}
.item {
border: 2px solid black;
font-size: 35px;
}
<body>
<div id="example">
<div class="one item">пункт1.</div>
<div class="two item">пункт2.</div>
<div class="three item">пункт3.</div>
<div class="four item">пункт4.</div>
</div>
</body>
justify-items
justify-items — определяет горизонтальное положение каждого элемента грида-контейнера в его области.
Если: justify-contentв случае определения имеется в виду содержимое грида-контейнера, тогда justify-items определяет каждый элемент отдельно, который располагается горизонтально в своей области.
Краткая информация:
| Նախասահմանված արժեքը | legacy |
| Ժառանգվում են | Нет |
| Կիրառվում են | С контейнером типа Grid. |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
start և end – элементы располагаются горизонтально в своей области.
Если направление: равно "лтр", startв случае элементы будут расположены в левых углах своей области, а endв случае , в правых углах.
Если: направление: равен «rtl»., startв случае элементы будут расположены в правых углах своей области, а endв случае - в левых углах.
#example {
display: grid;
grid-template-columns: repeat(6, 120px);
grid-template-rows: repeat(4, 100px);
grid-template-areas: "a a a . . ."
"b b b b b ."
"c c . . . ."
"d d d d d d";
grid-auto-flow: column;
justify-items: end;
direction: rtl;
grid-gap: 10px;
background-color: #ccc;
border: 2px solid black;
width: 770px;
height: 430px;
}
.one {
background-color: #38c700;
grid-area: a;
}
.two {
background-color: #38c700;
grid-area: b;
}
.three {
background-color: #38c700;
grid-area: c;
}
.four {
background-color: #38c700;
grid-area: d;
}
.item {
border: 2px solid black;
font-size: 35px;
}
<!DOCTYPE html>
<html>
<head>
<title>HAYTI</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="example">
<div class="one item">пункт1.</div>
<div class="two item">пункт2.</div>
<div class="three item">пункт3.</div>
<div class="four item">пункт4.</div>
</div>
</body>
</html>
self-start և self-end - позиционирует каждый элемент в соответствии со свойством направления.
.
.
.
justify-items: self-end;
.
.
.two {
background-color: #38c700;
grid-area: b;
direction: rtl;
}
.
.
.
left և right – позиционирует каждый элемент на левой или правой стороне аккаунта չառնելով Значение свойства направления.
safe և unsafe - например justify-items: safe center : Если элемент настолько велик, что выходит за пределы области, определенной контейнером сетки со значением center, элемент будет располагаться в середине области, определенной им, пока не выйдет за ее границы.safe), или элемент всегда должен располагаться посередине, независимо от того, находится он за пределами определенной области или нет. Оба они в настоящее время не поддерживаются браузерами (кроме Firefox).
#exampleA {
display: grid;
grid-template-columns: repeat(4, 120px);
grid-template-rows: repeat(1, 100px);
grid-template-areas: "a a . .";
direction: rtl;
justify-items: unsafe center;
grid-gap: 10px;
background-color: #ccc;
border: 2px solid black;
width: 770px;
height: 200px;
}
#exampleB {
display: grid;
grid-template-columns: repeat(4, 120px);
grid-template-rows: repeat(1, 100px);
grid-template-areas: "b b . .";
direction: rtl;
justify-items: safe center;
grid-gap: 10px;
background-color: #ccc;
border: 2px solid black;
width: 770px;
height: 200px;
}
.one {
background-color: #38c700;
grid-area: a;
}
.two {
background-color: #38c700;
grid-area: b;
}
p {
border: 2px solid black;
font-size: 35px;
}
<!DOCTYPE html>
<html>
<head>
<title>HAYTI</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="exampleA">
<div class="one"><p style="width: 280px">пункт1.</p></div>
</div>
<div id="exampleB">
<div class="two"><p style="width: 280px">пункт1.</p></div>
</div>
</body>
</html>
auto — устанавливает значение justify-items родительского элемента. Если у него нет родительского элемента или positionравно absoluteиз, работает normal нравиться
normal - в разных случаях реагирует по-разному
1. Если: displayравно blockиз, работает start нравиться
2. Если: positionравно absoluteиз оно работает start или stretch нравиться
3. Если: displayравно table-cellиз, учитывая justify-items свойство игнорируется.
4. Если: displayравно flexиз, учитывая justify-items свойство игнорируется.
5. Если: displayравно gridиз, тогда оно работает stretchили startнравиться
legacy - например justify-items: legacy left: Используя данное специальное слово (вместе с направлением), значение передается потомкам его типа блока.
legacyопределяется только left, right, center с направлениями.
justify-self
justify-self - определено grid-էլեմենտում՝ относится только к одному элементу сетки.
Краткая информация:
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Нет |
| Կիրառվում են | с элементом типа Grid. |
| Ենթարկվում է անիմացիայի | Нет |
Значения такие же, как justify-items- девять плюс stretchто есть auto, normal, start, end, self-start, self-end, center, left, right, stretch, safe, unsafe :
auto – определяет грид-контейнер родительского элемента justify-itemsзначение Если там не определено justify-itemsзатем autoбудет рассматриваться как normal:
normal - в разных случаях реагирует по-разному
1. Если: displayравно blockиз, работает start как ценность.
2. Если: positionравно absoluteиз, работает startили stretchнравиться
3. Если: displayравно table-cellиз, тогда justify-self свойство игнорируется.
4. Если: displayравно flexиз, тогда justify-self свойство игнорируется.
5. Если: displayравно gridиз, работает stretchили startнравиться
align-content
align-content – контейнер типа сетки (display: grid;) задает положение содержимого контейнера по вертикали (для определения положения содержимого контейнера по горизонтали будет использоваться сетка) justify-content свойство).
Чтобы это заметить, необходимо, чтобы контейнер сетки был меньше общих размеров его родительского элемента блочного типа.
Краткая информация:
| Նախասահմանված արժեքը | stretch |
| Ժառանգվում են | Нет |
| Կիրառվում են | с контейнером типа сетки. |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
| Արժեքը | Դիրքը | Предыдущий |
|---|---|---|
start |
 |
Содержимое сортируется по порядку, начиная с верхнего левого угла родительского элемента.
|
center |
 |
Содержимое сортируется по порядку, начиная с середины родительского элемента.
|
end |
 |
Содержимое перемещается в нижнюю часть родительского элемента.
|
space-betweent |
 |
Содержимое разделено на две части и расположено вверху и внизу родительского элемента.
|
space-around |
 |
Содержимое разделяется на две части и размещается в родительском элементе так, чтобы верхняя часть первой строки и нижняя часть последней строки были пустыми и равными друг другу, каждая из которых равна половине пустого пространства между строками.
|
space-evenly |
 |
Содержимое делится на две части и размещается в родительском элементе так, чтобы верх первой строки и низ последней строки были пустыми и равными друг другу, а пустое пространство между строками было равно им.
|
stretch |
 |
Содержимое равномерно занимает всю высоту контейнера сетки (а не родительского элемента). |
normal – содержимое контейнера располагается на своем обычном месте, как если бы оно не было определено align-content свойство.
stretch – если высота строки(grid-template-rows) определяется как auto и общая высота строк (т.е. grid- высота контейнера) меньше высоты блочного элемента (элемента, в котором он расположен grid-container), то свободное пространство контейнера сетки (не блочного элемента) будет разделено поровну. grid- между элементами.
#example {
display: grid;
grid-template-columns: repeat(4, 120px);
grid-template-rows: repeat(2, 100px);
align-content: end;
grid-gap: 10px;
background-color: #ccc;
border: 2px solid black;
width: 750px;
height: 430px;
}
.one {
background-color: #38c700;
}
.two {
background-color: #38c700;
}
.three {
background-color: #38c700;
}
.four {
background-color: #38c700;
}
.item {
border: 2px solid black;
font-size: 35px;
}
<body>
<div id="example">
<div class="one item">пункт1.</div>
<div class="two item">пункт2.</div>
<div class="three item">пункт3.</div>
<div class="four item">пункт4.</div>
<div class="one item">пункт5.</div>
<div class="two item">пункт6.</div>
<div class="three item">пункт7.</div>
<div class="four item">пункт8.</div>
</div>
</body>
align-items
align-items — определяет вертикальное положение каждого из элементов грида-контейнера в своих областях.
Если: align-contentОпределение относится к grid- к содержимому контейнера, align-items определяет каждый элемент отдельно, которые располагаются вертикально в определенной для них области.
Краткая информация:
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Нет |
| Կիրառվում են | с контейнером типа сетки. |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
| Արժեքը | Դիրքը | Предыдущий |
|---|---|---|
start |
 |
Элементы сетки располагаются в верхней части контейнера сетки.
|
center |
 |
Каждый из элементов сетки расположен в середине контейнера сетки. |
end |
 |
Элементы сетки располагаются в нижней части контейнера сетки. |
stretch |
 |
Элементы сетки располагаются по всей высоте контейнера сетки. |
baseline
|
 |
элементы сетки располагаются в соответствии с базовой линией первой строки текста, указанного в контейнере сетки (см.: вертикальное выравнивание). Каждый элемент располагается в направлении базовой линии первой строки или базовой линии последней строки. |
normal - действует по-разному в разных случаях
1. Если: displayравно blockиз, тогда align-items свойство игнорируется.
2. Если: positionравно absoluteок, тогда это работает startили stretchнравиться
3. Если: displayравно table-cellиз, тогда align-items свойство игнорируется.
4. Если: displayравно flexок, тогда это работает stretchнравиться
5. Если: displayравно gridок, тогда это работает stretchили startнравиться
#example {
display: grid;
grid-template-columns: repeat(4, 120px);
grid-template-rows: repeat(2, 100px);
align-items: end;
grid-gap: 10px;
background-color: #ccc;
border: 2px solid black;
width: 750px;
height: 430px;
}
.one {
background-color: #38c700;
}
.two {
background-color: #38c700;
}
.three {
background-color: #38c700;
}
.four {
background-color: #38c700;
}
.item {
border: 2px solid black;
font-size: 35px;
}
<!DOCTYPE html>
<html>
<head>
<title>HAYTI</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="example">
<div class="one item">пункт1.</div>
<div class="two item">пункт2.</div>
<div class="three item">пункт3.</div>
<div class="four item">пункт4.</div>
<div class="one item">пункт5.</div>
<div class="two item">пункт6.</div>
<div class="three item">пункт7.</div>
<div class="four item">пункт8.</div>
</div>
</body>
</html>
Другой пример:
#example {
display: grid;
grid-template-columns: repeat(4, 180px);
grid-template-rows: repeat(2, 210px);
align-items: baseline;
grid-gap: 10px;
background-color: #ccc;
border: 2px solid black;
width: 750px;
height: 430px;
}
.one {
background-color: #38c700;
font-size: 30px;
}
.two {
background-color: #38c700;
font-size: 50px;
}
.three {
background-color: #38c700;
font-size: 20px;
}
.four {
background-color: #38c700;
font-size: 60px;
}
.item {
border: 2px solid black;
}
<body>
<div id="example">
<div class="one item">
пункт1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="two item">пункт2. Lorem ipsum dolor сидит amet.</div>
<div class="three item">
пункт3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="four item">пункт4. Лорем ipsum dolor.</div>
</div>
</body>
align-self
align-self - если align-contentи align-itemsпредназначен grid-կոնտեյների тогда align-selfопределено grid-էլեմենտում, то есть относится только к одному элементу сетки.
Краткая информация:
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Нет |
| Կիրառվում են | с элементом типа Grid. |
| Ենթարկվում է անիմացիայի | Нет |
Значения такие же, как align-items-девять, то есть normal, start, end, center, baseline, stretch, auto:
auto - определяет родителя: grid- контейнер align-itemsзначение
normal - в разных случаях реагирует по-разному
1. Если: displayравно blockиз, учитывая align-self свойство игнорируется.
2. Если: positionравно absoluteок, тогда это работает startили stretchнравиться
3. Если: displayравно table-cellиз, затем учитывая align-self свойство игнорируется.
4. Если: displayравно flexок, тогда это работает stretchнравиться
5. Если: displayравно gridок, тогда это работает stretchили startнравиться
place-content place-items place-self
Установите значение двух свойств:
place-content: align-content justify content ;
place-items: align-items justify items ;
place-self: align-self justify self ;
Указание одного значения будет применяться к обоим свойствам (кроме stretchот).
Краткая информация:
| Նախասահմանված արժեքը | место-содержание: normal места-предметы: выровнять-элементы: нормальный оправдание-элементы: наследие место-сам: auto: |
| Ժառանգվում են | Нет |
| Կիրառվում են | С контейнерами типа Block, Flex, Grid. |
| Ենթարկվում է անիմացիայի | Нет |
.
.
grid-template-columns: repeat(4, 150px);
grid-template-rows: 110px;
place-content: center center ;
place-items: center center ;
.
.
align-tracks justify-tracks
align-tracks justify-tracks - определены masonry положение элементов в вертикальном или горизонтальном направлениях.
Значения равны align-contentsи justify-contentsк значениям
В настоящее время не поддерживается браузерами.
Краткая информация:
| Նախասահմանված արժեքը | normal |
| Ժառանգվում են | Нет |
| Կիրառվում են | С контейнером типа Grid, который имеет masonry столбец или строка. |
| Ենթարկվում է անիմացիայի | Нет |
.grid {
display: grid;
block-size: 250px;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: masonry;
align-tracks: end, start, end, space-between;
}
<body>
<div class="grid">
<div class="item" style="block-size: 2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 1.6em;"></div>
<div class="item" style="block-size: 4em;"></div>
<div class="item" style="block-size: 3.2em;"></div>
<div class="item" style="block-size: 3em;"></div>
<div class="item" style="block-size: 4.5em;"></div>
<div class="item" style="block-size: 1em;"></div>
<div class="item" style="block-size: 3.5em;"></div>
<div class="item" style="block-size: 2.8em;"></div>
</div>
</body>
Russian 
Armenian