Грид-разметка CSS: единица измерения fr

Development | Amber | Комментировать запись

В CSS Grid Layout появилась единица измерения под названием Fr. Fr — дробная единица гибкости. 1fr равна 1 части доступного пространства. Благодаря fr вам больше не нужно пересчитывать ширину разделов. Единица гибкости fr берет 100% экрана и равномерно распределяет его между элементами сетки.

Ниже приведены несколько примеров использования единицы fr. Элементы в этих примерах размещаются внутри областей сетки.

.container {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 200px 100px;

  grid-template-areas:
        "head head2 . side"
        "main main2 . side"
        "footer footer footer footer";
}

В данном случае каждый из 4 столбцов занимает одинаковое количество места.

Примеры использования fr

В вышеприведенном примере можно изменить значения fr.

container {
  /* ... */

  grid-template-columns: 1fr 1fr 40px 20%;
  grid-template-rows: 100px 200px 100px;

  /* ... */
}

Обратите внимание, как изменится макет.

В следующем примере элемент боковой панели покрывает 2fr, поэтому он будет такой же ширины, как элементы, охватывающие 1-й и 2-й столбцы:

.container {
  /* ... */

  grid-template-columns: 1fr 1fr 40px 2fr;
  grid-template-rows: 100px 200px 100px;

  /* ... */
}

Смешанные единицы

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

Например, если у вас есть сетка с 4 столбцами, первый столбец будет иметь размер 300 пикселей, второй — 80 пикселей (10% от 800 пикселей), третий и четвертый столбцы — 210 пикселей (каждый из которых будет занимать половину оставшегося пространства).

main {
  width: 800px;
  display: grid;
  grid-template-columns: 300px 10% 1fr 1fr;
  /* 300px 80px 210px 210px */

  grid-template-rows: auto;
}

Читайте также: Грид-разметка CSS: модуль CSS Grid Layout