27. Паттерны раскладок на Grid

CSS Grid: Паттерны Раскладок

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

Основные Концепции Grid

Прежде чем перейти к паттернам, вспомним основные концепции Grid:

Grid Container: Родительский элемент, который определяет сетку.
Grid Items: Дочерние элементы, которые располагаются внутри сетки.
Grid Lines: Горизонтальные и вертикальные линии, формирующие сетку.
Grid Tracks: Пространство между двумя соседними grid lines (столбцы и строки).
Grid Area: Прямоугольная область, ограниченная grid lines.

Паттерны Раскладок

1. Раскладка “Шапка, Контент, Подвал” (Header, Content, Footer)

Этот паттерн часто используется для базовой структуры веб-страниц.

<div class="grid-container">
  <header>Шапка</header>
  <main>Основной контент</main>
  <footer>Подвал</footer>
</div>

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* auto для шапки и подвала, 1fr для контента */
  grid-template-columns: 1fr; /* Один столбец */
  min-height: 100vh; /* Занимаем всю высоту экрана */
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

2. Боковая Панель и Основной Контент (Sidebar and Main Content)

Этот паттерн включает боковую панель для навигации или дополнительной информации и основной контент.

<div class="grid-container">
  <aside>Боковая панель</aside>
  <main>Основной контент</main>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* Боковая панель 200px, остальное для контента */
  grid-gap: 20px; /* Отступы между элементами */
  padding: 20px;
}

aside {
  background-color: #f0f0f0;
  padding: 10px;
}

main {
  padding: 10px;
}

3. Раскладка с Несколькими Столбцами (Multi-Column Layout)

Этот паттерн используется для отображения контента в нескольких столбцах.

<div class="grid-container">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
  <div>Элемент 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Адаптивное количество столбцов */
  grid-gap: 20px;
  padding: 20px;
}

.grid-container > div {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}

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

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

Новостные сайты: Часто используют Grid для организации статей, рекламных блоков и навигации.
Интернет-магазины: Используют Grid для отображения товаров в виде сетки и организации фильтров и категорий.
Фреймворки: Многие CSS-фреймворки, такие как Bootstrap или Tailwind CSS, предоставляют классы для упрощения создания Grid-раскладок.

Например, Bootstrap 5 использует Grid в своей системе раскладки, позволяя разработчикам быстро создавать адаптивные интерфейсы.

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

CSS Grid предоставляет мощные инструменты для создания сложных раскладок.
grid-template-rows и grid-template-columns определяют структуру сетки.
grid-gap задает отступы между элементами сетки.
repeat() и minmax() помогают создавать адаптивные раскладки.
Паттерны раскладок упрощают разработку и обеспечивают консистентность.