.container {
display: grid;
grid:
<grid-template> |
<grid-template-rows> /
[auto-flow && dense?]
<grid-auto-columns>?|
[auto-flow && dense?]
<grid-autwo-rows>? /
<grid-template-columns>;
}
.container {
grid: 100px 300px / 3fr 1fr;
/*
детальное описание
grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
*/
}
.container {
display: grid;
grid-gap: 20px;
grid:
"one one" 200px
"two four"
"three four"
/ 1fr 2fr;
/*
детальное описание
grid-template-areas: "one one" "two four" "three four";
grid-template-columns: 1fr 2fr;
grid-template-rows: 200px;
*/
}
.container {
grid: 100px 300px / auto-flow 200px;
/*
детальное описание
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;
*/
}
/*
Задаем количесвто элементов в 1 колонке, в данном случае 4.
Т.е. после каждого 4 элемента в колонке, будет создаваться новая колонка.
*/
ul {
display: grid;
grid-template-rows: auto auto auto auto;
grid-template-rows: repeat(4, auto);
grid-auto-flow: column;
}
<style>
.grid-container {
height: 100px;
width: 300px;
background: gray;
display: grid;
}
.grid-item {
border: 1px solid black;
}
</style>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
.container {
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}
.container {
grid-area: 2 / 2 / 3 / 3;
}
.container {
grid-auto-flow: row; /* default */
grid-auto-flow: column; /* default */
}
Автоматическое создание строк
.container {
grid-auto-rows: 200px;
}
.item {
grid-colum: grid-colum-start / grid-colum-end;
}
.item {
grid-colum: 1 / 4;
grid-colum: col-1-start / col-end;
/* от начала до конца */
grid-colum: 1 / -1;
}
.item {
grid-colum-end: 4;
grid-colum-end: col-2-end;
}
Задает отступ между столбцами
.container {
grid-column-gap: 20px;
}
.item {
grid-colum-start: 1;
grid-colum-start: col-1-start;
}
Отступ между ячейками сетки
.container {
grid-gap: 20px;
}
.item {
grid-row: grid-row-start / grid-row-end;
}
.item {
grid-row: 1 / 4;
grid-row: row-1-start / row-end;
/* от начала до конца */
grid-row: 1 / -1;
}
Задает отступ между строками
.container {
grid-row-gap: 20px;
}
.item {
grid-row-end: 4;
grid-row-end: row-2-end;
}
.item {
grid-row-start: 1;
grid-row-start: row-2-start;
}
Настройка грида через области
.container {
grid-template-areas:
"header header"
"sidebar content"
". footer";
/* точка указывает на пустую ячейку */
}
<style>
.grid-container {
height: 200px;
width: 300px;
display: grid;
grid-template-areas:
"header header"
"sidebar content"
". footer";
}
.header {
background-color: red;
grid-area: header;
}
.sidebar {
background-color: yellow;
grid-area: sidebar;
}
.content {
background-color: blue;
grid-area: content;
}
.footer {
background-color: green;
grid-area: footer;
}
</style>
<div class="grid-container">
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
Задает ширину колонок
.container {
display: grid;
/* фиксированная ширина колонок */
grid-template-columns: 100px 100px 100px;
/* 4 колонки с одинаковой шириной */
grid-template-columns: repeat(4, 1fr);
/* 4 колонки с широной по минимальному контенту */
grid-template-columns: repeat(4, min-content);
/* 4 колонки с широной по максимальному контенту */
grid-template-columns: repeat(4, max-content);
/* 2 колонки с указанием минимальной и максимальной ширины */
grid-template-columns: minmax(200px, 1fr) minmax(350px, 1fr);
/* 3 колонки крайние авто ширина, центральная */
grid-template-columns: auto fit-content(800px) auto;
/* 2 колонки левая по минимальному контенту правая по максимальной */
grid-template-columns: min-content max-content;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-columns: repeat(3, [col-start] 1 fr [col-end]);
/* ручное задание для номеров границ столбцов */
grid-template-column: [col-1-start] 1fr [col-2-start] 1fr [col-2-end];
}
<style>
.grid-container {
height: 100px;
width: 300px;
background: gray;
display: grid;
grid-template-columns: 100px 100px;
}
.grid-item {
border: 1px solid black;
}
</style>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
Задает высоту для строк
.container {
display: grid;
grid-template-rows: 50px 50px;
/* ручное задание для номеров границ строк */
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: repeat(3, [row-start] 1 fr [row-end]);
}
Для выравнивания используем:
align-items, justify-items
auto
normal
start
end
center
stretch
baseline
first baseline
last baseline
align-self, justify-self
auto
normal
start
end
center
stretch
baseline
first baseline
last baseline
align-content, justify-content
normal
start
end
center
stretch
space-around
space-between
space-evenly
baseline
first baseline
last baseline
.container {
align-items: center;
justify-items: center;
}
.item {
justify-self: center:
align-self: center;
}