Отступы между столбцами и строками в grid

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

 

Здравствуйте! Продолжаем  разбиратться с  версткой на гридах. Итак из прошлых уроков  вы уже знаете как создавать строки и столбцы в грид как задавать размеры грид-элементам, а из этого урока вы узнаете как задавать интервалы между строками и столбцами в грид-сетке.   Итак для  задания интервалов  между столбцами и строками используются свойства grid-column-gap и grid-row-gap.

Отступы между строк истолбцов gris 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: repeat(4, 1fr);
                grid-template-rows: repeat(4, 1fr);
                grid-column-gap: 15px;
                grid-row-gap: 15px;
            }
            .grid-item {
                text-align:center;
                font-size: 1.2em;
                padding: 1.5em;
                color: white;
            }
            .cvet1 {background-color: blue;}
            .cvet2 {background-color: orange;}
            .cvet3 {background-color: red;}
            .cvet4 {background-color: yellow;}
            .cvet5 {background-color: green;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="grid-item cvet1">Grid Item 1</div>
            <div class="grid-item cvet2">Grid Item 2</div>
            <div class="grid-item cvet3">Grid Item 3</div>
            <div class="grid-item cvet4">Grid Item 4</div>
            <div class="grid-item cvet1">Grid Item 5</div>
            <div class="grid-item cvet4">Grid Item 6</div>
            <div class="grid-item cvet5">Grid Item 7</div>
        </div>
    </body>
</html>

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

 

В случае ксли  значения  grid-column-gap и grid-row-gap совпадают, то вместо есть возможность использовать свойство grid-gap, которое установит оба отступа:

.container { 
    height: 100vh; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(3, 1fr); 
    grid-gap: 10px;}
Прочитано 159 раз Последнее изменение Суббота, 23 сентября 2017 12:01
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

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

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

Google+