CSS Grid Layout. Единица измерения fr

repeat
minmax()

Кроме появления новых свойств CSS для сетки, появилась и новая единица измерения fr (fractional unit). Чтобы лучше представить её назначение, начнём с базового примера.

1
2
3
4
5
6
7
8
9

Если мы будем уменьшать размеры окна браузера, то увидим, что содержимое не реагирует на изменения (кроме второго столбца, так как мы задали auto). Выглядит неуклюже. Размеры ячеек заданы в пикселях и они не меняются. Чтобы избежать этой проблемы, была придумана новая единица измерения fr.

Заменим пиксели на fr


.container {
	background-color: gray;
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

Теперь мы видим, что блоки равномерно разместились в сетке. А при изменении размеров окна они сжимаются. При этом величина промежутков между ячейками grid-gap сохраняется.

1
2
3
4
5
6
7
8
9

Как вы поняли, новая единица измерения работает как пропорция. Напоминает рецепт составления коктейля: 100 г сока, 100 г виски, 200 г молока (какой ужас).

Мы можем сочетать новые единицы измерения с другими. Например, так.


.container3 {
  ...
  grid-template-columns: 2fr 1fr 300px;
  ...
}

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

1
2
3
4
5
6
7
8
9

Теперь при изменении размеров ячейки первых двух столбцов будут сжиматься в пропорции 2 к 1, а третий столбец будет оставаться неизменным в 300 пикселей.

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

repeat

Существуют укороченные формы записи. Если ширина всех столбцов совпадает, то можно использовать запись.


grid-template-columns: repeat(3, 1fr);

Соответственно, запись repeat(9, 1fr) выведет все девять блоков равномерно в один ряд.

Подобный синтаксис справедлив и для grid-template-rows:


grid-template-rows: repeat(3, 1fr);

Можно объединить оба свойства в один.


grid-template: repeat(2, 1fr) / repeat(3, 1fr);

Можете поиграться с другими вариантами.


grid-template-rows: repeat(2, 1fr 2fr);
grid-template-rows: 100px repeat(2, 1fr 2fr);

minmax()

Можно задать минимальный и максимальный размер колонки через minmax().


grid-template-columns: minmax(200px, 300px) 1fr 1fr;

Измените размеры браузера, чтобы увидеть поведение.

1
2
3
4
5
6
7
8
9

Можно подстраиваться автоматически под размер содержимого ячейки.


grid-auto-row: minmax(100px, auto);
1
Текст
Текст
2
3
4
5
6
7
8
9

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

Вернуться в раздел о CSS Grid Layout

Реклама