GridCSS homework

Задание шаблона

grid-template-columns

Через данное свойство шаблон задается с помощью перечисление размеров столбцов. Так, сколько перечислено размеров, столько будет и столбцов. Наиболее удобное указание размеров столбцов осуществляется с помощью т.н. фракций (fr), которые указывают на относительный размер колонок.

1
2
3
4
5
6
7
8
9

Также размеры колонок можно задать через функцию repeat():
grid-template-column: repeat(10, 1fr)
В примере ниже: grid-template-columns: repeat(8, 2fr 4fr);

1
2
3
4
5
6
7
8
9

grid-template-rows

Данное свойство похоже на предыдущее, только через него задаются строки.
В примере: grid-template-rows: 100px 50px 150px;

1
2
3
4
5
6
7
8
9

Отступы и размерность

grid-gap, grid-row-gap, grid-column-gap

Данные свойства определяют расстояние между элементами

1) Между колонками (grid-column-gap: 10px):

1
2
3
4
5
6
7
8
9

2) Между рядами (grid-row-gap: 10px):

1
2
3
4
5
6
7
8
9

3) Совместно (grid-gap: 10px)

1
2
3
4
5
6
7
8
9

grid-auto-rows и minmax()

Примечание: существует также и grid-auto-columns, но делает данное свойство практически то же самое, в связи с чем рассмотрено не будет.

Определяет размер строк, для которых он явно не задан.

1
2
3
4
5
6
7
8
9

В нижеследующем случае необходимо использовать функцию minmax()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam amet, cum deleniti do lore earum eum facilis ipsam, iste laborum maxime modi molestias, necessitatibus nemo odio omnis perspici atis s uscipit ullam. ste laborum maxime modi molestias, necessitatibus nemo odio omnis perspiciatis suscipit ullam.
2
3
4
5
6
7
8
9

С использованием функции minmax:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam amet, cum deleniti do lore earum eum facilis ipsam, iste laborum maxime modi molestias, necessitatibus nemo odio omnis perspici atis s uscipit ullam. ste laborum maxime modi molestias, necessitatibus nemo odio omnis perspiciatis suscipit ullam.
2
3
4
5
6
7
8
9

Выравнивание