Повторение строк и столбцов и свойство grid

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

Здравствуйте! Продолжаем изучать новую технологию верстки с помощью Grid Layout. На прошлом уроке мы с вами разбирались со столбцами и строками в grid, а теперь поговорим о таком вопросе как повторение строк и столбцов и как все это можно оптимизировать. Дело в том, что когда у вас много строк и столбцов и вы хотите задать для них одинаковые размеры, то совсем необязательно прописывать все эти размеры. Достаточно написать один размер, а затем с помощью специальной функции repeat() повторить эти размеры. Итак  давайте разбираться.

Повторение строк и столбуов и функция grid

 

 

Повторение строк и столбцов в grid

Как я уже писал выше в случае, если у вас столбцов и строк много и они имеют одинаковые размеры, то вы можете использовать  функцию repeat(), которая  как раз и позволит настроить строки и столбцы. Рассмотрим пример:

grid-template-columns: 6em 6em 6em;
grid-template-rows: 3em 3em 3em 3em;

Как видно из примера и у строк и у столбцов размеры повторяются - 6em и 3em. А теперь давайте перепишем пример, применив функцию repeat:

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

Первый аргумент, котрый надо указать в функции repeat задает количество повторений, а второй - как раз размер строк или столбцов. Так свойство grid-template-columns: repeat(3, 6em); указывает, что надо определить 3 столбца шириной в 6em.

А выражение grid-template-rows: repeat(4, 3em) определяет 4 строки высотой по 3em.

Вы также можете задавать повторение нескольких столбцов и(или) строк:

.container {
    border: solid 2px red;
    display: grid;
    grid-template-columns: repeat(2, 5em 7em);
    grid-template-rows: 4em repeat(3, 4em);
}

В этом случае у вас будет 4 столбца: 2 раза будут повторяться два столбца с шириной 5em и 7em.

А вот в случае со строками будет создано четыре строки. Первая будет иметь высоту в 4em, а остальные 3 - 4em.

Свойство grid

Данное свойство объединяет  такие свойства grid-template-rows и grid-template-columns и  позволяет задать одновременно  настройки для строк и столбцов в таком формате:

grid: grid-template-rows / grid-template-columns;

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

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

Давайте все это сократим с помощью свойства grid.

.container {
    border: solid 2px red;
    display: grid;
    grid: 4em 4em 4em 4em / 6em 6em 6em;
}

А если еще и использовать функцию repeat(), мы еще больше сократим определение грида:

.container 
    border: solid 2px red;
    display: grid;
    grid: repeat(4, 4em) / repeat(3, 6em);
Прочитано 186 раз Последнее изменение Суббота, 09 сентября 2017 14:28
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

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

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

Google+