Именованные области

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 33 из 43.

Вместо того чтобы размещать элементы с помощью номеров линий, вы можете давать частям вашей сетки имена, используя свойство grid-template-areas. Этот метод отлично подходит для создания чистых, читаемых макетов — особенно при работе с несколькими секциями, такими как заголовки, боковые панели и футеры. Посмотрите пример ниже:

Мы определяем контейнер с помощью CSS Grid и используем grid-template-areas для создания именованного макета:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Каждая строка текста образует ряд, а каждое слово в строке является частью сетки. Если вы повторите слово, эта область растянется на большее пространство.

Затем вы сопоставляете свои HTML-элементы с этими именами следующим образом:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

Создайте макет CSS grid для базовой веб-страницы со следующими областями, как на картинке ниже:

Установите следующие свойства для селектора .container:

display в grid
grid-template-columns в 1fr 3fr
grid-template-rows в auto 1fr auto
grid-template-areas в:
"header header"
"profile main"
"footer footer"

Назначьте каждый элемент соответствующей области. Например, для .header установите grid-area в header.

Шпаргалка

Используйте grid-template-areas для создания именованных макетов сетки:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Каждая строка текста создает ряд, а каждое слово в строке является частью сетки. Повторение слова растягивает эту область на большее пространство.

Назначайте элементы областям сетки с помощью grid-area:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.