Перейти к содержанию

Позиционирование элементов

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

Позиционирование элементов

И по умолчанию каждый элемент в гриде позиционируется в одну ячейку по порядку. Но мы можем более точно настроить расположение элемента в гриде с помощью ряда свойств:

  • grid-row-start: задает начальную горизонтальную grid-линию, с которой начинается элемент
  • grid-row-end: указывает, до какой горизонтальной grid-линии надо растягивать элемент
  • grid-column-start: задает начальную вертикальную grid-линию, от которой начинается элемент
  • grid-column-end: указывает, до какой вертикальной grid-линии нужно растягивать элемент

Например, растянем элемент на несколько столбцов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Grid Layout в CSS3</title>
    <style>
      .grid-container {
        border: solid 2px #000;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 5em);
      }
      .special-item {
        grid-column-start: 2;
        grid-column-end: 5;
      }
      .grid-item {
        text-align: center;
        font-size: 1.1em;
        padding: 1.5em;
        color: white;
      }
      .color1 {
        background-color: #675ba7;
      }
      .color2 {
        background-color: #9bc850;
      }
      .color3 {
        background-color: #a62e5c;
      }
      .color4 {
        background-color: #2a9fbc;
      }
      .color5 {
        background-color: #4e342e;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item color1">Grid Item 1</div>
      <div class="grid-item color2 special-item">
        Grid Item 2
      </div>
      <div class="grid-item color3">Grid Item 3</div>
      <div class="grid-item color4">Grid Item 4</div>
      <div class="grid-item color5">Grid Item 5</div>
      <div class="grid-item color1">Grid Item 6</div>
      <div class="grid-item color4">Grid Item 7</div>
    </div>
  </body>
</html>

Позиционирование элементов

Здесь определено четыре столбца, причем второму элементу присвоен особый класс special-item, который располагается, начиная со 2 grid-линии или 2-го столбца (grid-column-start: 2) до 5-й вертикальной grid-линии (grid-column-end: 5).

Второй элемент необязательно должен начинаться со второго столбца, это может быть любой другой: и 1-й, и 3-й и т.д. Например, если мы поместим второй элемент, начиная с 3-го столбца, то на месте второго столбца образуется пустота:

1
2
3
4
.special-item {
  grid-column-start: 3;
  grid-column-end: 5;
}

Позиционирование элементов

Если для второго элемента установить начало с первого столбца, то второй элемент будет перенесен на следующую строку, и таким образом, он будет начинаться с первого столбца.

Вместо использования двух выше рассмотренных свойств мы можем использовать одно свойство - grid-column, которое принимает значения grid-column-start и grid-column-end через слеш:

1
grid-column: grid-column-start / grid-column-end;

Например, мы можем сократить стиль класса special-item следующим образом:

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

Аналогично с помощью свойств grid-row-start и grid-row-end можно задать позиционирование элемента на несколько строк. Так, изменим класс special-item следующим образом:

1
2
3
4
5
.special-item {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

В данном случае второй элемент позиционируется во втором столбце первой строки и растягивается до 3-й строки.

Позиционирование элементов

Вместо использования пары свойств grid-row-start и grid-row-end можно использовать одно общее свойство grid-row:

1
grid-row: grid-row-start / grid-row-end;

Так, мы могли бы изменить стиль special-item следующим образом:

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

span

С помощью специального слова span можно задать растяжение элемента на несколько ячеек. После слова span указывается, на какое количество ячеек надо растянуть элемент:

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

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

grid-area

Свойство grid-area объединяет свойства grid-column и grid-row, позволяя сократить их запись:

1
grid-area: row-start / column-start / row-end / column-end;

Например, изменим стили класса special-item:

1
2
3
.special-item {
  grid-area: 1 / 2 / 3 / 4;
}

Позиционирование элементов

См. также

Комментарии