Функция repeat и свойство grid¶
- Что такое Grid Layout. Grid Container
- Строки и столбцы
- Функция repeat и свойство grid
- Размеры строк и столбцов
- Отступы между столбцами и строками
- Позиционирование элементов
- Наложение элементов
- Направление и порядок элементов
- Именованные grid-линии
- Именованные grid-линии и функция repeat
- Области грида
- Макет страницы в Grid Layout
Повторение строк и столбцов¶
Если у нас столбцов и (или) строк много и они имеют одинаковые размеры, то есть смысл использовать специальную функцию repeat()
, которая позволит настроить строки и столбцы. Так, в примере выше повторяется определение одинаковых строк и столбцов в grid-контейнере:
grid-template-columns: 8em 8em 8em;
grid-template-rows: 5em 5em 5em 5em;
Здесь мы видим, что происходит повторение одних и тех же размеров - 8em
и 5em
для установки ширины столбцов и высоты строк. Поэтому перепишем стили, применив функцию repeat
:
.grid-container {
border: solid 2px #000;
display: grid;
grid-template-columns: repeat(3, 8em);
grid-template-rows: repeat(4, 5em);
}
Первый параметр функции repeat
представляет число повторений, а второй - определение строк или столбцов. Например, свойство grid-template-columns: repeat(3, 8em);
говорит, что необходимо определить 3 столбца шириной в 8em
.
Соответственно выражение grid-template-rows: repeat(4, 5em)
определяет 4 строки высотой по 5em
.
Можно задавать повторение нескольких столбцов и строк:
.grid-container {
border: solid 2px #000;
display: grid;
grid-template-columns: repeat(2, 7em 8em);
grid-template-rows: 6em repeat(3, 5em);
}
В данном случае будет создано 4 столбца: два раза будут повторяться два столбца с шириной 7em
и 8em
.
В случае со строками будет создано 4 строки. Причем первая будет иметь высоту в 6em
, а остальные три - 5em
.
Свойство grid¶
Свойство grid
объединяет свойства grid-template-rows
и grid-template-columns
и разом позволяет задать настройки для строк и столбцов в следующем формате:
grid: grid-template-rows / grid-template-columns;
К примеру, у нас есть следующее определение класса grid-контейнера:
.grid-container {
border: solid 2px #000;
display: grid;
grid-template-columns: 8em 8em 8em;
grid-template-rows: 5em 5em 5em 5em;
}
Мы можем сократить этот класс следующим образом:
.grid-container {
border: solid 2px #000;
display: grid;
grid: 5em 5em 5em 5em / 8em 8em 8em;
}
Либо опять же используя функцию repeat()
, можно еще больше сократить определение грида:
.grid-container {
border: solid 2px #000;
display: grid;
grid: repeat(4, 5em) / repeat(3, 8em);
}
См. также¶
- Что такое Grid Layout. Grid Container
- Строки и столбцы
- Функция repeat и свойство grid
- Размеры строк и столбцов
- Отступы между столбцами и строками
- Позиционирование элементов
- Наложение элементов
- Направление и порядок элементов
- Именованные grid-линии
- Именованные grid-линии и функция repeat
- Области грида
- Макет страницы в Grid Layout