Работа с сеткой в Grid Layout включает в себя определение строк и столбцов, что предоставляет гибкость и контроль над распределением элементов на веб-странице.

В этом уроке мы рассмотрим, как создавать и управлять строками и столбцами в Grid Layout с примерами, которые помогут вам лучше понять и использовать эту мощную функциональность.

Что такое строки и столбцы

В Grid Layout, сетка состоит из строк и столбцов. Строки и столбцы определяются и управляются с помощью свойств grid-template-rows и grid-template-columns. Эти свойства позволяют нам определить размеры и количество строк и столбцов в сетке.

CSS

  .grid-container {
      display: grid;
      grid-template-rows: 100px 200px; /* Два ряда: первый - 100px, второй - 200px */
      grid-template-columns: 1fr 2fr; /* Два столбца: первый - 1fr, второй - 2fr */
    }

    .item {
      border: 1px solid #ddd;
      padding: 10px;
    }

HTML

  <div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>

Этот пример - как свобода выражения в Grid Layout. Задайте размеры для строк и столбцов, и ваша веб-страница будет точно там, где вы хотите.

Работа с автоматическими размерами

Одной из мощных возможностей Grid Layout является возможность использования автоматических размеров для строк и столбцов. Для этого используется ключевое слово auto.

CSS

 .grid-container {
      display: grid;
      grid-template-rows: auto auto auto; /* Три строки с автоматическими размерами */
      grid-template-columns: 1fr 2fr; 
    }

    .item {
      border: 1px solid #ddd;
      padding: 10px;
    }

HTML

  <div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>

Давайте Grid заботиться о размерах за нас! auto делает размеры автоматическими, а это значит - меньше кода, больше гибкости.

Выравнивание и пространство между строками и столбцами

Grid Layout предоставляет возможности для управления выравниванием элементов внутри ячеек, а также задания пространства между строками и столбцами с использованием свойств align-items, justify-items, row-gap и column-gap.

CSS

.grid-container {
      display: grid;
      grid-template-rows: auto auto auto;
      grid-template-columns: 1fr 2fr;
      align-items: center; /* Выравнивание элементов по центру вдоль оси Y */
      justify-items: center; /* Выравнивание элементов по центру вдоль оси X */
      row-gap: 20px; /* Расстояние между строками */
      column-gap: 10px; /* Расстояние между столбцами */
    }

    .item {
      border: 1px solid #ddd;
      padding: 10px;
    }

HTML

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>

Контроль над выравниванием и пространством в Grid Layout - это как настройка музыкального звука. Выберите свои ноты (align-items и justify-items), добавьте пространство (row-gap и column-gap), и ваш макет зазвучит гармонично.

Практический пример: Создание сетки для блога

Давайте применим наши знания для создания простой сетки для блога с заголовком, изображением и текстом.

HTML

<div class="grid-container">
    <div class="header">Приветствуем вас в нашем лошадином блоге</div>
    <img class="image" src="https://flomaster.top/o/uploads/posts/2023-11/1699608066_flomaster-top-p-smeshnie-mordi-loshadei-risunki-instagram-18.jpg" alt="Elegant Image">
    <div class="text">
      <p>Добро пожаловать! Здесь вы найдете увлекательные истории, полезные статьи про лошадок.</p>
      <button>Читать далее</button>
    </div>
  </div>

CSS

  body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    .grid-container {
      display: grid;
      grid-template-rows: auto auto;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items: center;
      justify-items: center;
      margin: 50px auto;
      max-width: 800px;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      overflow: hidden;
    }

    .header {
      grid-column: span 2;
      background-color: #3498db;
      color: #fff;
      padding: 20px;
      text-align: center;
      font-size: 24px;
      border-bottom: 2px solid #297fb8; 
    }

    .image {
      background-image: url(https://flomaster.top/o/uploads/posts/2023-11/1699608066_flomaster-top-p-smeshnie-mordi-loshadei-risunki-instagram-18.jpg);
      background-size: cover;
      background-position: center;
      height: 300px;
      border-radius: 10px 10px 0 0;
    }

    .text {
      padding: 20px;
      text-align: justify;
      font-size: 16px;
    }

    button {
      background-color: #3498db;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #297fb8;
    }

В этом примере .grid-container устанавливает контейнер для сетки с двумя строками grid-template-rows: auto auto; и двумя столбцами grid-template-columns: 1fr 1fr;

gap: 20px; устанавливает расстояние между элементами в сетке.

align-items: center; и justify-items: center; центрируют элементы внутри ячеек сетки по вертикали и горизонтали.

Заключение

Освоив управление строками и столбцами, вы получаете ключ к созданию сложных, адаптивных макетов, делая ваш дизайн гибким и креативным. Раскройте потенциал Grid Layout для улучшения структуры ваших веб-проектов!