Как создать сайт

Именованные grid-линии и функция repeat

Здравствуйте! Я уже  писал о именованных линиях в сетке grid.  А в этом уроке мне хотелось бы рассмотреть  более детально  функцию repeat в  грид верстке. С помощью этой функции repeat вы  можете размножить столбцы и строки, которые вы создаете  как раз между именованными grid-линиями:

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

именованные грид линии и функция repeat

 

Функция repeat в grid layout.

<!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: 8px repeat(3, [column] 1fr [colgutter] 10px);
                grid-template-rows: 8px repeat(2, [row] 1fr [rowgutter] 10px);
            }
             
            .grid-item {
                background-color: #eee;
            }
             
            .special-item{
                grid-column: column 2;
                grid-row: row 1;
                background-color: #bbb;
            }
            .item1{
                grid-column: column 1;
                grid-row: row 1;
            }
            .item2{
                grid-column: column 3;
                grid-row: row 1;
            }
            .item3{
                grid-column: column 1;
                grid-row: row 2;
            }
            .item4{
                grid-column: column 2;
                grid-row: row 2;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="grid-item special-item"></div>
            <div class="grid-item item1"></div>
            <div class="grid-item item2"></div>
            <div class="grid-item item3"></div>
            <div class="grid-item item4"></div>
        </div>
    </body>
</html>

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

В примере рассмотрим определение столбцов:

grid-template-columns: 10px repeat(3, [column] 1fr [colgutter] 10px);

Здесь первый столбец будет шириной  в 10 пикселей. После  с помощью функции repeat  произойдет копирование столбцов. Данная функция создаст  подряд 3 копии 2 столбцов. 1-ый столбец будет иметь  ширину 1fr, то есть  он имеет пропорциональные размеры, и  будет располагаться соответсвенно  между grid-линиями «column» и «colgutter». После  «colgutter»  будет идти  еще один столбец  тоже шириной в 10 пикселей. И эти 2 столбца будут повторяться 3 раза. Таким образом  в гриде будет  семь столбцов.

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

.special-item{
    grid-column: column 2;  /* второй столбец с именем column */
    grid-row: row 1;        /* первая строка с именем row */
    background-color: #bbb;
}

Заметим, что  свойство grid-column: column 2 указывает на столбец в сетке, который  будет начинаться со 2-ой grid-линии «column».

Читайте также  Области грида

И даже  более того вы можете дополнительно создавать  новые именованные грид-линии даже не используя  функцию repeat:

<!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: 8px repeat(3, [column] 1fr [colgutter] 10px)
                                       [sidebarstart] 150px [sidebarend] 10px;
                grid-template-rows: 10px repeat(2, [row] 1fr [rowgutter] 10px);
            }
             
            .grid-item {
                background-color: #eee;
            }
             
            .special-item{
                grid-column: column 2;
                grid-row: row 1;
                background-color: #ccc;
            }
            .item1{
                grid-column: column 1;
                grid-row: row 1;
            }
            .item2{
                grid-column: column 3;
                grid-row: row 1;
            }
            .item3{
                grid-column: column 1;
                grid-row: row 2;
            }
            .item4{
                grid-column: column 2;
                grid-row: row 2;
            }
            .sidebar{
                grid-column: sidebarstart / sidebarend;
                grid-row: 2 / 5;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="grid-item special-item"></div>
            <div class="grid-item item1"></div>
            <div class="grid-item item2"></div>
            <div class="grid-item item3"></div>
            <div class="grid-item item4"></div>
            <div class="grid-item sidebar"></div>
        </div>
    </body>
</html>

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

И конечно же можно позиционировать элементы, используя номера grid-линий, как в примере  в отношении сайдбара:

.sidebar{
    grid-column: sidebarstart / sidebarend;
    grid-row: 2 / 5;
    background-color: #ccc;
}

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

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

4 + 6 =

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

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