Направление и порядок элементов в сетке grid

Направление и порядок элементов в сетке grid

Здравствуйте! В этом уроке в продолжении темы Верстка на grid рассмотрим как в гридах можно менять направление и порядок расположения элементов. А именно свойства grid-auto-flow и order.

Свойство grid-auto-flow

В грид-контейнере  всегда  все элементы располагаются  горизонтально то есть в  ряд, а как тоько места в контейнере больше нет, то элементы переносятся соответственно на следующую строку. А вот с помощью свойства grid-auto-flow  можно изменить направление элементов. Собственно  свойство принимает 2 значения:

  • row:  это значение по умолчанию, элементы  могут располагаться горизонтально,  а как только  места уже не будет хватать  будут  переноситься на следующую строку
  • column: элементы будут  располагаться вертикально друг под другом,  а как только места в столбце не будет  хватать, то  элементы  будут переноситься  на следующий столбец

порядок и направление элементов в гриде

 

 

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html, body{
                margin:0;
                padding:0;
            }
            .container {
                height: 100vh;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: repeat(3, 1fr);
                grid-auto-flow: row;
            }
            .item {
                text-align:center;
                font-size: 1.2em;
                padding: 1.2em;
                color: white;
            }
            .cvet1 {background-color: orange;}
            .cvet2 {background-color: yellow;}
            .cvet3 {background-color: red;}
            .cvet4 {background-color: blue;}
            .cvet5 {background-color: tomato;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item cvet1">Grid Item 1</div>
            <div class="item cvet2">Grid Item 2</div>
            <div class="item cvet3">Grid Item 3</div>
            <div class="item cvet4">Grid Item 4</div>
            <div class="item cvet1">Grid Item 5</div>
            <div class="item cvet4">Grid Item 6</div>
            <div class="item cvet5">Grid Item 7</div>
        </div>
    </body>
</html>

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

В примере свойство grid-auto-flow имеет значение row, посему элементы будут располагаться в строку. А теперь давайте  изменим стиль нашего контейнера:

.grid-container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
}

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

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

Свойство order

Данное свойство  позволяет задать порядок элементов. Это свойство очень похоже на одноименное свойство order, которое есть у flexboxов (подробнее читайте здесь) и также позволяет менять порядок элементов в контейнере:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html, body{
                margin:0;
                padding:0;
            }
            .container {
                height: 100vh;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: repeat(4, 1fr);
            }
            .item {
                text-align:center;
                font-size: 1.2em;
                padding: 1.5em;
                color: white;
            }
            .last-item{
                order: 1;
            }
            .first-item{
                order: -1;
            }
            .cvet1 {background-color: orange;}
            .cvet2 {background-color: blue;}
            .cvet3 {background-color: tomato;}
            .cvet4 {background-color: green;}
            .cvet5 {background-color: yellow;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item cvet1">Grid Item 1</div>
            <div class="item cvet2 last-item">Grid Item 2</div>
            <div class="item cvet3 last-item">Grid Item 3</div>
            <div class="item cvet4">Grid Item 4</div>
            <div class="item cvet1">Grid Item 5</div>
            <div class="item cvet4">Grid Item 6</div>
            <div class="item cvet5>Grid Item 7</div>            
            <div class="item cvet5 first-item>Grid Item 8</div>
        </div>
    </body>
</html>

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

Читайте также  Наложение элементов grid

В примере все элементы с классом last-item имеют порядок 1, поэтому они  всегда будут располагаться после других элементов, у которых  соответсвенно порядок равен 0 или меньше. Если же вам необходимо переместить одни элементы перед другими, то следует использовать отрицательное значение для свойства order. Так, у восьмого элемента порядок равен -1, что меньше, чем у других элементов. Поэтому этот элемент в разметке по факту будет располагаться перед всеми остальными  элементами.

В заключении смотрите также видео о направление и порядке элементов в гриде

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: