Andrey Makarov
.grid {
display: grid;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Доля оставшегося пространства
.grid { grid-template-columns: repeat(6, 1fr); }
.grid {
display: grid;
grid-template-columns: 80px 1fr 80px;
grid-template-rows: 80px 1fr 80px;
}
.grid {
display: grid; grid: 60px 1fr 80px / repeat(3, 1fr);
}
.element {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.element {
grid-column: 3 / 4;
grid-row: 2 / 4;
}
.element {
grid-column: 3 / 4;
grid-row: 2 / span 2;
}
.element {
grid-area: 2 / 3 / 4 / 4;
}
grid-row-start
grid-column-start
grid-row-end
grid-column-end
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid :nth-child(1) {
grid-column: 1 / 4;
}
.grid :nth-child(5) {
grid-column: 1 / 4;
}
.grid {
grid-template-areas:
'a a a a'
'b c c d' /* Шаблон области */
'e e e e';
}
.grid :nth-child(1) { grid-area: a; }
.grid :nth-child(2) { grid-area: b; }
.grid :nth-child(3) { grid-area: c; }
.grid :nth-child(4) { grid-area: d; }
.grid :nth-child(5) { grid-area: e; }
.grid {
grid-template-areas:
'a a a a'
'b c c d'
'b c c d'
'e e e e';
}
.grid {
grid-template-areas:
'🐷 🐷 🐷 🐷'
'🐸 🤖 🤖 🔫'
'🐵 🐵 🐵 🐵';
}
}
.grid-container {
display: grid;
grid-template-columns: 250px 1fr 150px;
grid-template-rows: repeat(3, 100px);
}
.element { grid-column: 1; grid-row: 1; }
.element { grid-column: 2/4; grid-row: 2/4; }
Грид-контейнер | Грид-элемент |
---|---|
align-items |
align-self |
justify-items |
justify-self |
Авто | Вручную |
---|---|
align-content |
grid-row-gap |
justify-content |
grid-column-gap |