JavaRush /Курсы /Модуль 1: Web Core /Grid Areas

Grid Areas

Модуль 1: Web Core

14 уровень , 8 лекция

Открыта

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

CSS Grid Layout предоставляет серьезные возможности для создания сложных макетов с помощью именованных областей (grid areas). Свойство grid-template-areas позволяет задавать области сетки, которые можно использовать для упрощенного размещения элементов. Это свойство позволяет разработчикам визуально организовывать макет и облегчать его поддержку.

Основные концепции grid-template-areas

Определение областей:
- Свойство grid-template-areas позволяет задавать имена для различных областей сетки
- Каждое имя области представляет собой прямоугольную группу ячеек
Использование именованных областей:
- Определенные области можно использовать для размещения элементов, задав свойство grid-area для каждого элемента

Синтаксис grid-template-areas:

    
      .container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer"
      }

Синтаксис для элементов Grid:

    
      .header {
        grid-area: header;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }

Пояснение:

Каждая строка в значении grid-template-areas представляет собой строку в сетке
Каждое слово в строке представляет собой ячейку или группу ячеек
Точки (.) можно использовать для пустых ячеек

9.2 Пример использования grid-template-areas

Пример полной реализации:

CSS

    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .sidebar {
        grid-area: sidebar;
        background-color: #3498db;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Пример Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="sidebar">Sidebar</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Объяснение кода:

.grid-container: определяет контейнер Grid с помощью display: grid и задает макет сетки с использованием grid-template-areas. В данном случае макет состоит из трех строк: первая строка — это заголовок, вторая строка состоит из боковой панели и основного контента, третья строка — это подвал
.header, .sidebar, .main, .footer: определяют стили для различных областей сетки и связывают эти области с именами в grid-template-areas с помощью свойства grid-area

9.3 Управление пустыми областями

Свойство grid-template-areas позволяет оставлять области пустыми, используя символ точки (.) для обозначения пустого места.

Пример полной реализации:

CSS

    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          ". main ."
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Пустые области Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Объяснение кода:

.grid-container: создает контейнер Grid с тремя областями: заголовок, основной контент и подвал. Средняя строка содержит пустые области слева и справа от основного контента
.header, .main, .footer: определяют стили для областей и связывают их с именами областей в grid-template-areas

Предыдущая Предыдущая лекция

Следующая Следующая лекция

Комментарии (1)

ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ

No Name Уровень 36

31 мая 2025

+ лекция в копилке