Определение строк и столбцов

3.1 Свойство grid-template-columns

CSS Grid Layout позволяет создавать сложные макеты веб-страниц с использованием строк и столбцов. Два ключевых свойства для определения структуры сетки — grid-template-rows и grid-template-columns. Эти свойства позволяют задавать количество и размеры строк и столбцов в контейнере Grid, что дает разработчикам полный контроль над компоновкой элементов.

Свойство grid-template-columns определяет количество и размеры столбцов в сетке. Оно принимает одно или несколько значений, которые могут быть указаны в различных единицах измерения, таких как пиксели (px), проценты (%), единицы гибкости (fr), и другие.

Пример 1: Задание фиксированных размеров столбцов

В этом примере сетка будет состоять из трех столбцов. Первый столбец шириной 100px, второй столбец шириной 200px, третий столбец шириной 100px:

    
      .grid-container {
        display: grid;
        grid-template-columns: 100px 200px 100px; /* Три столбца с фиксированными размерами */
      }
    
  

Пример 2: Использование единиц гибкости (fr)

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

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* Три столбца с гибкими размерами */
      }
    
  

Пример 3: Использование повторения (repeat)

В этом примере используется функция repeat, которая позволяет упростить запись. Сетка будет состоять из трех столбцов одинаковой ширины:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
      }
    
  

Пример 4: Задание минимальных и максимальных размеров (minmax)

В этом примере каждый из трех столбцов будет иметь минимальную ширину 100px и гибкий размер, который может увеличиваться до 1fr в зависимости от доступного пространства:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Три столбца с минимальной шириной 100px и гибкими размерами */
      }
    
  

3.2 Свойство grid-template-rows

Свойство grid-template-rows аналогично grid-template-columns, но оно определяет количество и размеры строк в сетке. Оно также принимает одно или несколько значений, которые могут быть указаны в различных единицах измерения.

Пример 1: Задание фиксированных размеров строк

В этом примере сетка будет состоять из трех строк. Первая строка высотой 50px, вторая строка высотой 100px, третья строка высотой 50px:

    
      .grid-container {
        display: grid;
        grid-template-rows: 50px 100px 50px; /* Три строки с фиксированными размерами */
      }
    
  

Пример 2: Использование единиц гибкости (fr)

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

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

Пример 3: Использование повторения (repeat)

В этом примере используется функция repeat, которая позволяет упростить запись. Сетка будет состоять из трех строк одинаковой высоты:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 1fr); /* Три равные строки */
      }
    
  

Пример 4: Задание минимальных и максимальных размеров (minmax)

В этом примере каждая из трех строк будет иметь минимальную высоту 50px и гибкий размер, который может увеличиваться до 1fr в зависимости от доступного пространства:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Три строки с минимальной высотой 50px и гибкими размерами */
      }
    
  

3.3 Комбинирование свойств

Комбинирование свойств grid-template-rows и grid-template-columns

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

В этом примере сетка будет состоять из двух столбцов: первый столбец займет 1 часть доступного пространства, а второй столбец — 2 части. Сетка также будет состоять из двух строк: первая строка высотой 100px, вторая строка высотой 200px.

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
      }
    
  

Пример полной реализации:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Пример CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Элемент 1</div>
            <div class="grid-item">Элемент 2</div>
            <div class="grid-item">Элемент 3</div>
            <div class="grid-item">Элемент 4</div>
          </div>
        </body>
      </html>
    
  

Объяснение кода:

• .grid-container: определяет контейнер как grid-контейнер с двумя столбцами и двумя строками. Промежутки между элементами задаются с помощью свойства gap
• .grid-item: определяет базовые стили для элементов сетки, такие как фоновый цвет, цвет текста, отступы, центрирование текста и граница

1

Задача

Модуль 1: Web Core, 14 уровень, 2 лекция

Недоступна

Гибкие столбцы

Гибкие столбцы

Открыть

1

Задача

Модуль 1: Web Core, 14 уровень, 2 лекция

Недоступна

Repeat для строк

Repeat для строк

Открыть