1fr
(fraction) — это единица измерения в CSS Grid Layout, которая используется для задания ширины или высоты ячеек сетки. Она распределяет доступное пространство на фракции, где 1fr обозначает одну равную часть от всего доступного пространства.
Например, если у вас есть контейнер сетки, шириной 800 пикселей, и вы хотите создать две колонки, первая была бы 1fr, а вторая занимала бы оставшееся пространство, то можно использовать следующий код CSS:
.container {
display: grid;
grid-template-columns: 1fr auto;
width: 800px;
}
Этот код создаст сетку с двумя колонками. Первая колонка займет 1/2 ширины контейнера, а вторая будет занимать оставшееся пространство. Если бы мы написали grid-template-columns: auto 1fr;
, то вторая колонка занимала бы 1/2 ширины контейнера, а первая занимала бы оставшееся пространство.
1fr
— удобный способ создания одинаковых колонок во внутренних частях сетки, без необходимости задавать фиксированные значения ширины. Однако, следует помнить, что 1fr
может не подойти для всех случаев и требует тщательного планирования разметки и дизайна.