Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Grid Areas

Grid Areas

Frontend SELF UA
Рівень 28 , Лекція 3
Відкрита

9.1 Властивість grid-template-areas

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

Основні концепції grid-template-areas

  1. Визначення областей:
    • Властивість grid-template-areas дозволяє задавати імена для різних областей сітки
    • Кожне ім'я області представляє прямокутну групу клітинок
  2. Використання іменованих областей:
    • Визначені області можна використовувати для розміщення елементів, задавши властивість 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;
      }
Telegram

Пояснення:

  • Кожен рядок у значенні 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
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ