CSS Grid. Введение

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

Основные возможности CSS Grid:

1. Двумерная сетка: CSS Grid работает с рядами (rows) и колонками (columns), что позволяет создавать сложные структуры.

2. Гибкие размеры: Можно задавать размеры колонок и строк в пикселях, процентах, фракциях (fr) или использовать функции вроде minmax().

3. Выравнивание: Встроенные возможности для выравнивания элементов по горизонтали и вертикали.

4. Адаптивность: Легко создавать адаптивные макеты с помощью медиазапросов и функций вроде repeat(auto-fit, minmax()).

5. Управление элементами: Элементы можно размещать в любом месте сетки, даже перекрывая друг друга.

Пример создания макета сайта

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Три колонки: две узкие и одна широкая */
  grid-template-rows: auto 100px; /* Две строки */
  gap: 10px; /* Расстояние между элементами */
}

.header {
  grid-column: 1 / -1; /* Занимает всю ширину */
}

.sidebar {
  grid-row: 2; /* Размещается во второй строке */
}

.main-content {
  grid-column: 2; /* Размещается во второй колонке */
}

 

Преимущества CSS Grid

• Простота создания сложных макетов.
• Минимальный код для управления расположением элементов.
• Хорошая поддержка в современных браузерах.

CSS Grid идеально подходит для создания современных, адаптивных и сложных макетов сайтов.