Свойство grid-template-rows
Свойство, которое задает размеры строкам grid сетки. Так же есть возможность задать им имена для условного обозначения. Количество строк определяется количеством значений, определенных в списке, разделенном пробелами.
grid-template-rows: 1fr 1fr;
Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
grid-template-rows: none;
Без обозначения строк
<div class="grid-1">
<div class="grid-1-col bg-green">1 Колонка</div>
<div class="grid-1-col bg-red">2 Колонка</div>
<div class="grid-1-col bg-red">3 Колонка</div>
<div class="grid-1-col bg-green">4 Колонка</div>
</div>
<style>
.grid-1 {
display: grid;
grid-template-columns: auto auto;
}
.grid-1-col {
padding: 1rem;
border: 1px solid white;
}
</style>
1 Колонка
2 Колонка
3 Колонка
4 Колонка
grid-template-rows: 100px auto 5rem;
Размеры строк используя разные единицы измерения
<div class="grid-2">
<div class="grid-2-col bg-green">1 Колонка</div>
<div class="grid-2-col bg-red">2 Колонка</div>
<div class="grid-2-col bg-red">3 Колонка</div>
<div class="grid-2-col bg-green">4 Колонка</div>
<div class="grid-2-col bg-green">5 Колонка</div>
<div class="grid-2-col bg-red">6 Колонка</div>
</div>
<style>
.grid-2 {
display: grid;
grid-template-rows: 100px auto 5rem;
grid-template-columns: auto auto;
}
.grid-2-col {
padding: 1rem;
border: 1px solid white;
}
</style>
1 Колонка
2 Колонка
3 Колонка
4 Колонка
5 Колонка
6 Колонка
grid-template-rows: 1fr 2fr;
Указания размера строк используя единицы измерения fr
<div class="grid-3">
<div class="grid-3-col bg-green">1 Колонка</div>
<div class="grid-3-col bg-red">2 Колонка</div>
<div class="grid-3-col bg-red">3 Колонка</div>
<div class="grid-3-col bg-green">4 Колонка</div>
</div>
<style>
.grid-3 {
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: auto auto;
}
.grid-3-col {
padding: 1rem;
border: 1px solid white;
}
</style>
1 Колонка
2 Колонка
3 Колонка
4 Колонка
grid-template-rows: [header] 1fr [content] 2fr;
Обозначаем имена строк и их размер
<div class="grid-4">
<div class="grid-4-col bg-green">1 Колонка</div>
<div class="grid-4-col bg-red">2 Колонка</div>
<div class="grid-4-col bg-red">3 Колонка</div>
<div class="grid-4-col bg-green">4 Колонка</div>
</div>
<style>
.grid-4 {
display: grid;
grid-template-rows: [header] 1fr [content] 2fr;
grid-template-columns: auto auto;
}
.grid-4-col {
padding: 1rem;
border: 1px solid white;
}
</style>
1 Колонка
2 Колонка
3 Колонка
4 Колонка