- Теория
- Теория
fr, доля доступного пространства
Мы переопределили браузерные стили для тега <body> и списка преимуществ, теперь займёмся потоком. Содержимое списка должно располагаться в две колонки:
Чтобы сделать колонки, превратим список в грид-контейнер так же, как мы это сделали с шапкой в этом задании.
В списке преимуществ шесть элементов, а разбить их надо на две колонки. Если элементов в грид-контейнере больше, чем колонок, то следующие элементы автоматически переносятся на новую строку, или ряд, и так же разделяются на колонки. Например, в нашем случае получится три ряда.
По замыслу дизайнера, колонки в списке должны быть одинаковыми по размеру и занимать всё доступное пространство по ширине. Как это сделать, ведь мы не можем знать заранее, какого размера монитор у пользователя?
Используем для размера колонок особую единицу измерения — fr (сокращённое от fraction — «доля»). Она означает долю доступного пространства в грид-контейнере.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}Грид-контейнер в примере будет поделён на 3 равные части. Первая колонка получит одну часть ширины грид-контейнера, а вторая колонка — две части. Как бы ни изменялась ширина контейнера, пропорции колонок всегда будут одинаковыми.
fr можно использовать и вместе с пикселями. Например, вот так можно создать сетку, где правая колонка имеет фиксированную ширину 200px, а левая занимает всё оставшееся пространство:
.grid-container {
display: grid;
grid-template-columns: 1fr 200px;
}Потренируемся задавать размеры в fr, чтобы лучше понять, как она работает. А после разделим содержимое списка преимуществ на две колонки одинаковой ширины.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
