- Теория
- Теория
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
, чтобы лучше понять, как она работает. А после разделим содержимое списка преимуществ на две колонки одинаковой ширины.
Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.