Свойство 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 Колонка

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии