Рубріки: Веб-разработкаТеория

Верстаем на Grid в CSS: гайд по основным понятиям с примерами

Ольга Змерзла
22.09.2021 12:28

Верстаем на Grid в CSS: гайд по основным понятиям с примерами

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

Grid — один из самых мощных модулей CSS. Он нужен для удобного создания шаблонов в CSS и незаменим при создании сайтов, адаптивных блоков, галерей, форм. Возможности для расстановки объектов с CSS Grid безграничны.

Содержание статьи:

1. Как устроен модуль CSS Grid

2. Главные свойства в CSS Grid для контейнера

2.1 Grid-template-columns

2.2 Grid-template-rows

2.3 Grid-template-areas

2.4 Grid-template

2.5 Grid-row-gap

2.6 Grid-column-gap

2.7 Grid-gap

2.8 Justify-items

2.9 Align-items

2.10 Justify-content

2.11 Align-content

2.12 Grid-auto-rows

2.13 Grid-auto-columns

2.14 Grid-auto-flow

2.15 Grid

3. Гайд по созданию Grid

4. Заключение

Как устроен модуль CSS Grid

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

Чтобы создать макет на основе сетки, необходимо определить grid-контейнер — область с контекстом форматирования, где все дочерние элементы будут размещаться в соответствии с правилами сетки. Для этого необходимо добавить свойство display: grid:

.grid-container {
    display: grid;
}

Теперь все потомки элемента становятся grid-элементами, а значит — можно использовать свойства Grid для их позиционирования и выравнивания.

Прежде всего определим количество колонок и строк в сетке. Все они будут образовывать grid-элементы.

Пример грида 4х3 с 12-тью grid-элементами

Главные свойства в CSS Grid для контейнера

Параметры grid-template-columns и grid-template-rows отвечают за количество строк и колонок, а также за их размер. Все параметры в значениях указываются через пробел и означают grid-пути.

Свойства grid-row-gap и grid-column-gap дают возможность создавать промежутки между строками и столбцами. Они определяют размеры grid-линий и могут задаваться в любых единицах измерения CSS — в пикселях или процентах.

Свойства grid-auto-rows и grid-auto-columns определяют размеры автоматически сгенерированных grid-путей. Размер пути может задаваться в любых единицах измерения CSS — в пикселях, процентах или fr (специальной единице измерения для гридов).

Давайте рассмотрим каждое из свойств подробнее.

Grid-template-columns

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

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

1fr 1fr 1fr — означает создание трех колонок одинаковой ширины.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 20px;
      }
      .example > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns property example</h2>
    <div class="example">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Grid-template-rows

Свойство grid-template-rows помогает добавить строки. Значения свойства разделяются пробелами и определяют высоту строки:

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

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 30px;
      }
      .auto-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-rows property example</h2>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Grid-template-areas

Свойство grid-template-areas создает шаблон сетки с использованием заданных в свойстве grid-area (свойство для grid-элементов) имен grid-областей. Каждая из областей обозначается апострофами.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: header;
      }
      .box2 {
        grid-area: menu;
      }
      .box3 {
        grid-area: main;
      }
      .box4 {
        grid-area: right;
      }
      .box5 {
        grid-area: footer;
      }
      .grid-container {
        display: grid;
        grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-areas property example</h2>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Menu</div>
      <div class="box3">Main</div>
      <div class="box4">Right</div>
      <div class="box5">Footer</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Grid-template

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

Строки и столбцы разделяются косой чертой.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template: 170px / auto auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Grid-row-gap

Свойство grid-row-gap позволяет задать отступы между строками. Ширина указывается разделением строк при помощи grid-row-gap.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 20px;
        grid-row-gap: 0;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div class="box8">8</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Grid-column-gap

Свойство grid-column-gap определяет отступы между колонками. Задается в любых единицах измерения CSS — в пикселях или процентах.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 30px;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Grid-gap

В значении grid-gap через пробел указываются сразу два параметра — промежутки между строками и между колонками.

Но если между строками и колонками промежутки одинаковые, то допускается указание одного параметра.

Свойство grid-gap — это сокращение для grid-column-gap и grid-row-gap.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 60px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Justify-items

Свойство justify-items оказывает влияние на все grid-элементы контейнера. Оно предназначено для выравнивания содержимого grid-элемента по оси строки.

Задаваемые значения:

  • start — фиксация содержимого по левому краю области;
  • center — фиксация содержимого по центру области;
  • end — фиксация содержимого по правому краю области;
  • stretch (по умолчанию) — заполнение всей ширины области.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 5px;
        justify-items: start;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Align-items

Свойство align-items оказывает влияние на все grid-элементы контейнера. Оно предназначено для выравнивания содержимого grid-элемента по оси столбца.

Задаваемые значения:

  • start — фиксация содержимого по верхнему краю области;
  • center — фиксация содержимого по центру области;
  • end — фиксация содержимого по нижнему краю области;
  • stretch (по умолчанию) — заполнение всей высоты области.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: -webkit-flex;
        /* Safari */        -webkit-align-items: stretch;
        /* Safari 7.0+ */        display: flex;
        align-items: stretch;
      }
      #example li {
        -webkit-flex: 1;
        /* Safari 6.1+ */        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Визуальное отображение:

Результат

Justify-content

Свойство justify-content используется тогда, когда размер сетки превышает размер контейнера. Оно выравнивает грид по оси строки и контролирует элементы, выходящие за пределы.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .center {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: -webkit-flex;
        -webkit-justify-content: center;
        display: flex;
        justify-content: center;
      }
      .center div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: center" is set:</p>
    <div class="center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Align-content

Свойство align-content используется, когда размер сетки превышает размер контейнера, но в отличие от justify-content, выравнивает грид по оси столбца.

Задаваемые значения для align-content и justify-content одинаковы:

  • start — выравнивание сетки по левому краю контейнера;
  • center — выравнивание сетки по центру контейнера;
  • end — выравнивание сетки по правому краю контейнера;
  • stretch — заполнение всей ширины контейнера;
  • space-evenly — между каждым элементом добавляется равное пространство, даже по краям сетки;
  • space-around — между каждым элементом добавляется равное пространство, кроме краев сетки;
  • space-between — между каждым элементом добавляется равное пространство, но по краям добавляет половину пространства.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        /* Safari */        -webkit-flex-flow: row wrap;
        /* Safari 6.1+ */        -webkit-align-content: stretch;
        /* Safari 7.0+ */        display: flex;
        flex-flow: row wrap;
        align-content: stretch;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Визуальное отображение:

Результат

Grid-auto-rows

Свойство grid-auto-rows указывает размер строк в контейнере. Может влиять только на те строки, где не указан их размер.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .auto-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .auto-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .auto-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .auto-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .auto-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .auto-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 100px;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .auto-container {
        display: grid;
        grid-auto-rows: auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows property example</h2>
    <h3>100 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div class="auto-box1">1</div>
      <div class="auto-box2">2</div>
      <div class="auto-box3">3</div>
      <div class="auto-box4">4</div>
      <div class="auto-box5">5</div>
      <div class="auto-box6">6</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Grid-auto-columns

Свойство grid-auto-columns указывает размер столбцов в контейнере.

Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .black-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .black-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .black-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .black-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .black-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .black-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .auto-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .auto-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .auto-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .auto-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .auto-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .auto-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        grid-gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        grid-gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div class="black-box1">1</div>
      <div class="black-box2">2</div>
      <div class="black-box3">3</div>
      <div class="black-box4">4</div>
      <div class="black-box5">5</div>
      <div class="black-box6">6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div class="auto-box1">1</div>
      <div class="auto-box2">2</div>
      <div class="auto-box3">3</div>
      <div class="auto-box4">4</div>
      <div class="auto-box5">5</div>
      <div class="auto-box6">6</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Grid-auto-flow

Свойство grid-auto-flow управляет алгоритмом авторазмещения. Необходимо в том случае, когда grid-элементы не были созданы.

Пример с row:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        grid-gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #ff00d4;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Grid

Свойство grid устанавливает исходные значения для grid-row-gap и grid-column-gap.

Это сокращенное свойство для:

  • grid-template-columns;
  • grid-auto-columns;
  • grid-template-rows;
  • grid-auto-rows;
  • grid-template-areas;
  • grid-auto-flow.

Пример с grid-auto-flow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
        grid-auto-flow: column;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>

Визуальное отображение:

Результат

Гайд по созданию Grid

Код для создаваемого грида 3х3 имеет вид:

<!doctype html>
<title>Example</title>
<style>
#grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2vw;
  }
#grid > div {
  font-size: 5vw;
  padding: .5em;
  background: gold;
  text-align: center;
}
</style>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Где:

  • grid-template-rows: 1fr 1fr 1fr — строки в сетке;
  • grid-template-columns: 1fr 1fr 1fr — колонки в сетке;
  • grid-gap: 2vw — отступы между элементами;
  • стили grid-элементов:
#grid > div {
  font-size: 5vw;
  padding: .5em;
  background: gold;
  text-align: center;
}

Сама сетка имеет небольшие отступы между элементами.

Отступы между элементами в сетке

В этом случае разметка HTML будет следующей:

<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Внешний <div> — grid-контейнер, а это значит, что все элементы в нем являются grid-элементами. Чтобы HTML стал гридом, применим CSS:

#grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2vw;
}

У внешнего <div> присвоен ID #grid, поэтому это правило к нему применяется.

В CSS указан display: grid, что превращает элемент в контейнер Grid.

Чтобы сократить код, можно использовать функцию repeat() для всех значений размера элемента. К примеру, grid-template-rows: 1fr 1fr 1fr 1fr 1fr легко сокращается до grid-template-rows: repeat(5, 1fr).

В заключение

Сайты уже давно создаются с использованием CSS Grid. Гриды открывают возможности размещать элементы как в столбцах, так и в строках.

CSS Grid Layout появился в 2017 году и уже стал неотъемлемым инструментом для фронтенд-разработчиков. Его использование упрощает их работу.

Читайте также: Как использовать медиа-запросы в CSS?

Ольга Змерзла
Теги: cssCSS GridCSS-версткаGridhtmlверстка
22.09.2021 12:28

Останні статті

Обучение Power BI – какие онлайн курсы аналитики выбрать

Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…

13.01.2024

Work.ua назвал самые конкурентные вакансии в IТ за 2023 год

В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…

08.12.2023

Украинская IT-рекрутерка создала бесплатный трекер поиска работы

Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…

07.12.2023

Mate academy отправит работников в 10-дневный оплачиваемый отпуск

Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…

07.12.2023

Переписки, фото, история браузера: киевский программист зарабатывал на шпионаже

Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…

07.12.2023

Как вырасти до сеньйора? Девелопер создал популярную подборку на Github

IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…

07.12.2023