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

Оцените материал
(0 голосов)

 

Здравствуйте! В этом уроке рассмотрим как позиционируются элементы в грид-сетке. По сути грид-сетка  представляет из себя  набор ячеек, которые получаются  на пересечении столбцов и строк. А сами строки и столбцы образуются с помощью grid-линий:

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

 

 

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

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

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

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

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

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

Рассмотрим пример:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
        <style>
            .container {
                border: solid 2px red;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(3, 5em);
            }
            .spec-item{
                grid-column-start:2;
                grid-column-end: 5;
            }
            .item {
                text-align:center;
                font-size: 1.1em;
                padding: 1.3em;
                color: white;
            }
            .cvet1 {background-color: orange;}
            .cvet2 {background-color: red;}
            .cvet3 {background-color: tomato;}
            .cvet4 {background-color: green;}
            .cvet5 {background-color: blue;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item cvet1">Grid Item 1</div>
            <div class="item cvet2 spec-item">Grid Item 2</div>
            <div class="item cvet3">Grid Item 3</div>
            <div class="item cvet4">Grid Item 4</div>
            <div class="item cvet5">Grid Item 5</div>
            <div class="item cvet1">Grid Item 6</div>
            <div class="item cvet4">Grid Item 7</div>
        </div>
    </body>
</html>

Просмотреть  пример

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

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

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

Кстати вместо использования 2 выше рассмотренных свойств мы можем использовать 1 свойство - grid-column, которое имеет значения grid-column-start и grid-column-end через "/"

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

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

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

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

.spec-item{
    grid-column-start:3;
    grid-row-start: 1;
    grid-row-end: 3;
}

В этом примере 2-ой элемент размещается во 2-ом столбце 1-ой строки и растягивается до третьей строки.

Также вместо того, чтобы  использовать  пару свойств grid-row-start и grid-row-end  вы можете использовать общее свойство grid-row:

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

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

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

Специальное свойство span

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

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

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

Свойство grid-area

Данное свойство  позволяет объединять 2 свойства grid-column и grid-row,  что позволяет существенно  сократить их запись:

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

Давайте изменим стили класса spec-item:

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

И на закрепление смотрите видео.

Прочитано 190 раз Последнее изменение Суббота, 30 сентября 2017 13:00
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+