Как создать сайт

Области грида

Здравствуйте! В этом уроке мы рассмотрим такое понятие как  области в Grid Layout. Эти области мы можем задавать c помощью вертикальных и горизонтальных линий, которые и будут задавать  границу этой области. Области могут включать несколько ячеек грида и особенно полезны при определении семантических отношений между элементами на странице.

 

Области грида

 

 

Области grid-контейнера

Для  того чтобы определить области у grid-контейнера используется свойство grid-template-areas. Давайте рассмотрим на примере:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Layout области в CSS3</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html, body{
                margin:0;
                padding:0;
            }
            .container {
                height:100vh;
                display: grid;
                grid-template-areas: "header header"
                                     "sidebar content"
                                     "sidebar content";
                grid-template-columns: 250px 1fr;
                grid-template-rows: 200px 1fr 100px;
            }
            .header { grid-area: header; background-color: #eee; }
            .sidebar { grid-area: sidebar; background-color: #aaa; }
            .content { grid-area: content; background-color: #bbb; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header"></div>
            <div class="sidebar"></div>
            <div class="content"></div>
        </div>
    </body>
</html>

Просмотреть  пример

В римере у грида  назначаются 2 столбца и 3 строки:

grid-template-columns: 150px 1fr;
grid-template-rows: 100px 1fr 100px;

В конечном итоге у в гриде будет 3 х 2 = 6 ячеек. Но поскольку в разметке страницы есть 3 элемента с такими областями: header, sidebar, content. То свойство grid-template-areas и позволяет установить, как эти самые области должны располагаться на странице:

grid-template-areas:    "header header"
                        "sidebar content"
                        "sidebar content";

Такое выражение как  «header header»  может указывать, что область header  будет занимает 2 ячейки  подряд.

А вот следующее выражение «sidebar content»  уже будет указывать  на 2-ую строку, где область sidebar занимает 1-ую ячейку, а content — 2-ую ячейку.

Для того, чтобы установить области у элементов надо задать свойство grid-area:

.header {
    grid-area: header;  /* элемент с классом header помещается в область header*/
    background-color: #bbb;
}

А теперь рассмотрим более сложный пример.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html, body{
                margin:0;
                padding:0;
            }
            .container {
                height:100vh;
                display: grid;
                grid-template-areas: "header header header header header"
                                     ". . . . ."
                                     "menu . content . sidebar"
                                     ". . . . ."
                                     "footer footer footer footer footer";
                grid-template-columns: 140px 5px 1fr 5px 130px;
                grid-template-rows: 100px 5px 1fr 5px 90px;
            }
            .header { grid-area: header; background-color: orange; }
            .menu { grid-area: menu; background-color: red; }
            .sidebar { grid-area: sidebar; background-color: green; }
            .content { grid-area: content; background-color: blue; }
            .footer { grid-area: footer; background-color: tomato; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header"></div>
            <div class="content"></div>
            <div class="menu"></div>
            <div class="sidebar"></div>
            <div class="footer"></div>
        </div>
    </body>
</html>

Просмотреть  пример

Читайте также  Как сделать макет страницы на Grid Layout

Теперь  уже грид содержит 5 строк и 5 столбцов, что равняется 5х5=25 ячеек, которые соответственно  размещаются в  5 областях: header, menu, sidebar, content и footer.

Свойство header содержит также и  запись «…..»  это так называемое пустое пространство, которое не будет  не принадлежать ни к одной области и нужно для задания пустых отступов между областями.

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

39 − 33 =

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: