Строки и столбцы в grid

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

 Здравствуйте! Продолжаем разбираться  с версткой на grid  layout. Из прошлого урока вы узнали что такое Grid Layout.  А сегодня мы с вами разберем свойства grid-template-columns и grid-template-rows. Grid Layout  создает своеобразную сетку, состоящую  из строк и столбцов, на пересечении оных есть ячейки.  А вот как раз  для установки строк и столбцов в грид применяются такие  свойства CSS3:

  • grid-template-columns: управляет столбцами

  • grid-template-rows: управляет строками

Строки и столбцы в Grid Layout

Столбцы Grid Layout

Для настройки столбцов применим у контейнера  свойство grid-template-columns. Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Template  Columns  в CSS3</title>
        <style>
            .container {
                border: solid 2px red;
                display: grid;
                grid-template-columns: 8em 8em;
            }
 
            .item {
                box-sizing: border-box;
                text-align:center;
                font-size: 1.1em;
                padding: 1.5em;
                color: white;
            }
 
            .cvet1 {background-color: #675BA7;}
            .cvet2 {background-color: #9BC850;}
            .cvet3 {background-color: #A62E5C;}
            .cvet4 {background-color: #2A9FBC;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item cvet1">Grid Element 1</div>
            <div class="item cvet2">Grid Element 2</div>
            <div class="item cvet3">Grid Element 3</div>
            <div class="item cvet4">Grid Element 4</div>
            <div class="item cvet1">Grid Element 5</div>
        </div>
    </body>
</html>

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

Cвойству grid-template-columns надо передать ширину столбцов. Сколько вам надо иметь в сетке (гриде) столбцов, соотвественно столько и нужно передать значений. Так, в нашем примере грид содержит 2 столбца, следовательно свойству передаются 2 значения, которые задают ширину столбцов:

Ну а если вы желаете иметь в гриде 3 столбца, то передаете 3 значения соответственно:

grid-template-columns: 4em 10em 2em;

В случае, если столбцов больше то  для их размещения создаются новые строки.

Строки Grid Layout.

Строки настраиваются аналогично столбцам, только используется другое свойство grid-template-rows это свойство устанавливается у родительського контейнера:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Grid Template Rows в CSS3</title>
        <style>
            .container {
                border: solid 2px red;
                display: grid;
                grid-template-rows: 4em 5em;
            }
            .item {
                text-align:center;
                font-size: 1.1em;
                padding: 1.5em;
                color: white;
            }
            .cvet1 {background-color: #675BA7;}
            .cvet2 {background-color: #9BC850;}
            .cvet3 {background-color: #A62E5C;}
            .cvet4 {background-color: #2A9FBC;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item cvet1">Grid Element 1</div>
            <div class="item cvet2">Grid Element 2</div>
            <div class="item cvet3">Grid Element 3</div>
            <div class="item cvet4">Grid Element 4</div>
            <div class="item cvet1">Grid Element 5</div>
            <div class="item cvet4">Grid Element 6</div>
            <div class="item cvet3">Grid Element 7</div>
        </div>
    </body>
</html>

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

Для свойства grid-template-rows нужно задавать  высоту каждой из строк. В примере высота 1-ой и 2-ой строк составляет 5em.

Если элементов будет больше, чем ячеек сетки (грида), то образуются дополнительные строки, поэтому несмотря на то, что задано 2 строки по факту их 3 и высота последней строки необязательно будет 5em, а может вычисляться автоматически.

Давайте немного подправим  стили грид-контейнера, добавим еще 2 строки:

.container {
    border: solid 2px red;
    display: grid;
    grid-template-columns: 4em 5em 6em;
    grid-template-rows: 5em 5em 4em 3em;
}

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

В примере мы определили 3 столбца и 4 строки:

Как видно ячеек грида больше, чем элементов, поэтому последняя строка оказывается пустой.

В заключении смотрите видео по срокам и столбцам грид.

 

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

Нетология

TemplateMonster

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

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

Google+