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

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

Грид представляет собой набор ячеек, которые образуются на пересечении столбцов и строк. Но сами строки и столбцы образуются с помощью 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
55
56
57
<!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;
}

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

См. также

Комментарии