25. Вложенные гриды

CSS: Вложенные гриды

Вложенные гриды позволяют создавать сложные и гибкие макеты, размещая один грид-контейнер внутри другого. Это открывает возможности для детализированного контроля над структурой вашего сайта.

Что такое вложенные гриды?

Представьте, что у вас есть большая комната (главный грид), и вы хотите разделить ее на несколько зон. Внутри одной из этих зон вы хотите создать еще более мелкие разделы (вложенный грид). В CSS это реализуется путем превращения грид-элемента в грид-контейнер.

<div class="container">
  <div class="item">Item 1</div>
  <div class="item nested-grid">
    <div class="nested-item">Nested Item 1</div>
    <div class="nested-item">Nested Item 2</div>
  </div>
  <div class="item">Item 3</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Три колонки */
  gap: 10px;
}

.item {
  background-color: lightblue;
  padding: 20px;
  border: 1px solid black;
}

.nested-grid {
  display: grid; /* Делаем этот элемент грид-контейнером */
  grid-template-columns: 1fr 1fr; /* Две колонки внутри */
  gap: 5px;
  background-color: lightgreen;
}

.nested-item {
  background-color: lightcoral;
  padding: 10px;
  border: 1px solid black;
}

В этом примере .container - это главный грид. Элемент .item nested-grid также является грид-контейнером, создавая вложенный грид внутри второго элемента главного грида. Это позволяет независимо управлять расположением элементов внутри этого конкретного элемента.

Практические примеры

Пример 1: Боковая панель с навигацией

<div class="page-layout">
  <aside class="sidebar">
    <nav class="navigation">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </nav>
  </aside>
  <main class="content">
    <h1>Main Content</h1>
    <p>Some content here...</p>
  </main>
</div>

.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr; /* Боковая панель и основное содержимое */
}

.sidebar {
  background-color: #f0f0f0;
}

.navigation {
  display: grid; /* Вложенный грид для навигации */
  grid-template-rows: repeat(3, auto); /* Три строки для ссылок */
  padding: 10px;
}

.navigation a {
  padding: 5px;
  text-decoration: none;
  color: black;
  border-bottom: 1px solid #ccc;
}

Пример 2: Галерея изображений

<div class="gallery">
  <div class="image-container">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="image-container">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="image-container">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Адаптивная сетка */
  gap: 10px;
}

.image-container {
  display: grid; /* Вложенный грид для центрирования изображения */
  place-items: center; /* Центрируем изображение по вертикали и горизонтали */
  background-color: #eee;
}

.image-container img {
  max-width: 100%;
  max-height: 150px;
}

Жизненный пример

Многие современные веб-сайты и веб-приложения используют вложенные гриды для создания сложных макетов. Например:

• Интерфейсы электронной коммерции: Размещение списка товаров (главный грид) и отображение деталей товара с использованием вложенного грида для организации информации о продукте (изображения, описание, цена).
• Панели управления (Dashboards): Разбиение страницы на секции (главный грид) и использование вложенных гридов внутри каждой секции для организации графиков, таблиц и другой информации.
• Фреймворки CSS (Bootstrap, Materialize): Хотя они часто используют flexbox или собственные системы, концепция вложенных гридов применяется для создания сложных компонентов и макетов.

Ключевые моменты

• Любой грид-элемент может быть превращен в грид-контейнер.
• Вложенные гриды позволяют создавать более детализированные макеты.
• Вложенные гриды не наследуют свойства родительского грида.
• Используйте grid-template-columns и grid-template-rows для определения структуры каждого грида.
• Вложенные гриды обеспечивают гибкость и контроль над расположением элементов.

Интерактивный пример