, чтобы сохранить свой прогресс
Использование CSS Grid для изменения размера столбцов и строк
В CSS Grid вы можете использовать абсолютные и относительные единицы измерения, такие как px
и em
, чтобы определить размер строк и столбцов. Также вы можете использовать следующие единицы измерения: fr
: устанавливает столбцу или строке долю доступного пространства, auto
: устанавливает столбцу или строке ширину или высоту по содержимому автоматически, %
: устанавливает столбцу или строке процентную ширину его контейнера. Вот код, который генерирует вывод в предварительном просмотре:
grid-template-columns: auto 50px 10% 2fr 1fr;Этот фрагмент создает пять столбцов. Ширина первого столбца задается его содержимым, второй столбец шириной 50 пикселей, третий столбец шириной 10% от ширины его контейнера и последние два столбца делят оставшееся пространство между собой в отношении 2 к 1, две доли - четвёртому столбцу и одна доля - пятому.
Создайте грид с тремя столбцами, ширина которых будет следующей: 1fr, 100px и 2fr.
/**
* Your test output will go here.
*/