Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
02 Июн 2023
2 мин
453

Как использовать CSS Grid для создания макета сайта

«Освойте мощный инструмент CSS Grid для создания сложных макетов сайтов с нашей пошаговой статьей, идеальной для новичков!»

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

Основы CSS Grid

CSS Grid – это двумерная система разметки, которая позволяет создавать сложные макеты с использованием строк и столбцов. Для начала работы с Grid, необходимо задать контейнеру свойство display: grid;.

Создание сетки

Для создания сетки с определенным количеством строк и столбцов используются свойства grid-template-rows и grid-template-columns. Например, создадим сетку с тремя строками и двумя столбцами:

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Здесь 1fr означает одну равную долю места, доступного в контейнере. Таким образом, мы создаем сетку, где все ячейки имеют одинаковый размер.

Размещение элементов

Чтобы разместить элементы внутри сетки, используется свойство grid-column и grid-row. Они позволяют указать начальную и конечную позиции элемента в сетке. Например:

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Этот код размещает элемент на первой строке, занимая оба столбца.

Пример макета сайта с использованием CSS Grid

Давайте создадим простой макет сайта с использованием CSS Grid. Макет будет состоять из шапки, основного контента, боковой панели и подвала.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Example</title>
  <style>
    .container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-columns: 1fr 3fr;
      gap: 1rem;
    }
    header {
      grid-column: 1 / -1;
    }
    main {
      grid-column: 2 / 3;
    }
    aside {
      grid-column: 1 / 2;
    }
    footer {
      grid-column: 1 / -1;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>Header</header>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
  </div>
</body>
</html>

В этом примере мы создали контейнер с тремя строками и двумя столбцами. Шапка и подвал занимают всю ширину сетки, основной контент и боковая панель располагаются в своих столбцах. Между элементами сетки установлен зазор в 1rem.

😉 Теперь вы знаете основы работы с CSS Grid и можете использовать его для создания макетов сайтов. Удачи в изучении веб-разработки!

Добавить комментарий

Подарок
Забрать подарок