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

Именованные grid-линии в Grid Layout

Здравствуйте! В этом уроке речь пойдет о  именованных линиях в  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: [col1st] 1fr [col1en] 10px
                                        [col2st] 1fr [col2en] 10px
                                        [col3st] 1fr [col3en];
                grid-template-rows: [row1st] 1fr [row1en] 10px [row2st] 1fr [row2en];
            }
             
            .grid-item {
                background-color: #eee;
            }
             
            .special-item{
                grid-column: col1st / col2en;
                grid-row: row1st;
                background-color: #aaa;
            }
            .item1{
                grid-column: col3st / col3en;
                grid-row: row1st;
            }
            .item2{
                grid-column: col1st / col1en;
                grid-row: row2st;
            }
            .item3{
                grid-column: col2st / col2en;
                grid-row: row2st;
            }
            .item4{
                grid-column: col3st / col3en;
                grid-row: row2st;
            }
        </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: [col1st] 1fr [col1en] 10px
                        [col2st] 1fr [col2en] 10px
                        [col3st] 1fr [col3en];
grid-template-rows: [row1st] 1fr [row1en] 10px [row2st] 1fr [row2en];

Потом, с помощью  этих названий, вы можете  размещать элементы между линиями:

.special-item{
    grid-column: col1st / col2en;
    grid-row: row1st;
    background-color: #ccc;
}

Так, в примере элемент с классом special-item берет свое начало от вертикальной линии col1st и простирается до вертикальной линии col2en. И одновременно он начинается от горизонтальной линии row1st, и поскольку конечная горизонтальная линия не указана, то элемент будет занимать только 1 строку.

Или вот еще один пример макета страницы:

<!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 {
                padding: 0;
                margin: 0;
            }
 
            .container {
                display: grid;
                height: 100vh;
                grid-template-rows: 6em 10px 1fr;
                grid-template-columns: [mainst] 1fr [mainen] 10px [sidebarest] 25% [sidebaren];
            }
 
            .grid-item-content {
                background-color: #455a45;
                grid-row: 3 / 4;
                grid-column: mainst / mainen;
            }
 
            .grid-item-sidebar {
                background-color: #374755;
                grid-row: 3 / 4;
                grid-column: sidebarest / sidebaren;
            }
 
            .grid-item-header{
                background-color: #263235;
                grid-row: 1 / 2;
                grid-column: mainst / sidebaren;
            }
 
            .grid-item {
                color: #fff;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <main class="container">
            <header class="grid-item grid-item-header">
                <h1>Header</h1>
            </header>
                 
            <article class="grid-item grid-item-content">
                <h1>Main Content</h1>
            </article>
             
            <aside class="grid-item grid-item-sidebar">
                <h1>Sidebar</h1>
            </aside>
        </main>
    </body>
</html>

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

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

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

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

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

Об авторе

admin administrator

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

8 + 1 =

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

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