Где и как использовать имя линии/колонки в grid-template-columns?

Сейчас изучаю гриды и немного не понимаю такую вещь, я увидел на сайте что как один из параметров у grid-template-columns(или rows) это имя линии или строки типо:

grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start];

вот, имена здесь указываются в [ ] и у меня такой вопрос, как потом обращаться к этим именам и зачем они нужны? можно ли обратиться к этому имени как к классу или id и изменить например задний фон?


Ответы (1 шт):

Автор решения: Dzorogh

Например, вы можете блока, который содержит контент на странице сделать такой вариант

grid-template-columns: [full-start] minmax(15px,1fr) [main-start] minmax(0,930px) [main-end] minmax(15px,1fr) [full-end];

А затем добавлять в этот контейнер блоки и выбирать, как они будут отображаться: во всю ширину экрана или занимать максимум 930px. Для этого во внутренних блоках надо добавить параметр, который указывает именованную область, в которой разместить блок:

grid-column: full;

или

grid-column: main;
→ Ссылка