Макет страницы в Grid Layout

Макет страницы в Grid Layout

Coursme
8 мин.
17 янв. 2024

Давайте рассмотрим создание простого и адаптивного макета веб-страницы, используя Grid Layout. Наш макет состоит из шапки (header), подвала (footer), основного содержимого (content), блока навигации (menu) и сайдбара (sidebar).

Начнем с базового определения грида для мобильных устройств, где экран ограниченной ширины (например, 468px):

.grid-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;
}

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

Теперь представим, что мы увеличиваем ширину экрана, и вступает в силу другое определение грида:

.grid-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;
}

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

Таким образом, мы можем динамически изменять структуру макета в зависимости от различных устройств, обеспечивая оптимальное отображение контента.Вот пример HTML-кода для данного макета:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Адаптивный макет с использованием Grid Layout</title>
   <link rel="stylesheet" href="styles.css"> <!-- Подключаем внешний файл стилей (если необходимо) -->
   <style>
       /* Ваши стили могут быть размещены и здесь, внутри тега <style> */
       * {
           box-sizing: border-box;
       }
       html, body {
           margin: 0;
           padding: 0;
       }
       .grid-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;
       }
       .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 (max-width: 468px) {
           .grid-container {
               grid-template-areas:
                   'header'
                   '.'
                   'menu'
                   '.'
                   'content'
                   '.'
                   'sidebar'
                   '.'
                   'footer';
               grid-template-columns: 1fr;
               grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;
           }
       }
   </style>
</head>
<body>
   <div class="grid-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>

Обратите внимание, что в примере кода я включил стили внутри тега <style> для удобства, но при реальной разработке лучше использовать внешний файл стилей.

  1. display: grid; Задает контейнеру тип отображения с использованием Grid Layout.
  2. grid-template-areas Определяет именованные области (зоны) в гриде. В данном случае, указаны области для header, menu, content, sidebar и footer. Эти области определены в виде сетки, где каждая строка представляет собой строку в сетке, а каждая строка внутри каждой области - столбец.
  3. grid-template-columns Определяет размеры столбцов в гриде. В данном случае, у нас есть три столбца: первый и последний размером 130px, второй и четвертый размером 5px, и третий столбец занимает оставшееся пространство (1fr).
  4. grid-template-rows Определяет размеры строк в гриде. У нас есть пять строк: первая и последняя размером 90px, вторая и четвертая размером 5px, и третья строка занимает оставшееся пространство (1fr).

Заключение

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

Назад
Следующий урок
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Курсы
Блог
Меню