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

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

1
2
3
4
5
6
7
8

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

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


.container2 {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  background-color: magenta;
  color: #444;
}

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

1
2
3
4
5
6
7
8

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

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


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

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

1
2
3
4
5
6
7
8

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

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

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

Реклама