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

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

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

Давайте создадим вот такую страницу.

 

макет страницы на основе грид

 

Создание макета страницы на Grid Layout.

<!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"
                                     "."
                                     "menu"
                                     "."
                                     "content"
                                     "."
                                     "sidebar"
                                     "."
                                     "footer";
                grid-template-columns: 1,2fr;
                grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;
            }
            .header { grid-area: header; background-color: #bbb; }
            .menu { grid-area: menu; background-color: #ccc; }
            .sidebar { grid-area: sidebar; background-color: #ccc; }
            .content { grid-area: content; background-color: #eee; }
            .footer { grid-area: footer; background-color: #bbb; }
            h3{
                text-align:center;
            }
            @media screen and (min-width: 468px) {
                 
                .container {
                    height:100vh;
                    display: grid;
                    grid-template-areas: "header header header header header"
                                         ". . . . ."
                                         "menu . content . sidebar"
                                         ". . . . ."
                                         "footer footer footer footer footer";
                    grid-template-columns: 130px 5px 1fr 5px 130px;
                    grid-template-rows: 90px 5px 1fr 5px 90px;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header"><h3>Header</h3></div>
            <div class="content"><h3>Content</h3></div>
            <div class="menu"><h3>Menu</h3></div>
            <div class="sidebar"><h3>Sidebar</h3></div>
            <div class="footer"><h3>Footer</h3></div>
        </div>
    </body>
</html>

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

В  одном из прошлых уроков я уже поднимал тему именованных областей в грид. И в этом примере  также применяются именованные области, поскольку очень удобно получается связывать стили с семантическими элементами станицы.

Но поскольку,  сайты сейчас  просматривают также и на мобильных устройствах, ширина которых меньше десктопов желательно иметь и адаптивный макет, который бы хорошо смотрелся и на мобильных устройствах. Для этого в стилях есть 2 разных определения grid. Одно  для мобильных устройств  ширина экрана, которых меньше 468px:

.container {
    height:100vh;
    display: grid;
    grid-template-areas: "header"
                         "."
                         "menu"
                         "."
                         "content"
                         "."
                         "sidebar"
                         "."
                         "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;
}

А вот при увеличении ширины экрана в будет действовать другое определение грида:

.container {
    height:100vh;
    display: grid;
    grid-template-areas: "header header header header header"
                         ". . . . ."
                         "menu . content . sidebar"
                         ". . . . ."
                         "footer footer footer footer footer";
    grid-template-columns: 130px 5px 1fr 5px 130px;
    grid-template-rows: 90px 5px 1fr 5px 90px;
}

Как видно из примера сетка состоит из 5 столбцов и 5 строк.

Читайте также  Повторение строк и столбцов и свойство grid

 

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

Плюсануть
Поделиться

Об авторе

admin administrator

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

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