Свойство grid-template-areas

Определяет области внутри контейнера grid сетки. На эти области затем можно ссылаться при размещении элементов grid сетки.

grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

grid-template-areas: none;

Без определения областей grid сетки

<div class="grid-1">
    <div class="grid-1-col  bg-green">Header</div>
    <div class="grid-1-col  bg-red">Sidebar</div>
    <div class="grid-1-col  bg-green">Main</div>
    <div class="grid-1-col  bg-red">Footer</div>
</div>

<style>
    .grid-1 {
        display: grid;
        grid-template-areas: none;
    }
    
    .grid-1-col {
        padding: 1rem;   
        border: 1px solid white;
    }
</style>
Header
Sidebar
Main
Footer
grid-template-areas: "header header header" "sidebar main main" "footer footer footer";

Вы можете использовать имена областей, чтобы указать, какие ячейки должен занимать каждый элемент grid сетки. Элементам grid сетки присваиваем название области используя свойство grid-area

<div class="grid-2">
    <div class="grid-2-col  grid-2-header  bg-green">Header</div>
    <div class="grid-2-col  grid-2-sidebar  bg-red">Sidebar</div>
    <div class="grid-2-col  grid-2-main  bg-green">Main</div>
    <div class="grid-2-col  grid-2-footer  bg-green">Footer</div>
</div>

<style>
    .grid-2 {
        display: grid;
        grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
    }
    
    .grid-2-col {
        padding: 1rem;   
        border: 1px solid white;
    }
    
    .grid-2-header {
        grid-area: header;
    }
    
    .grid-2-sidebar {
        grid-area: sidebar;
    }
    
    .grid-2-main {
        grid-area: main;
    }
    
    .grid-2-footer {
        grid-area: footer;
    }
</style>
Header
Sidebar
Main

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

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

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