Give names to your columns and rows

Names lines

Content

Remember for moving our elements we used grid-column,grid-row and we indicate numbers who define where the elements should start and end. We also saw that we can use grid-template-areas who allow us to create directly the layout in our css. Well there is an other way to place our elements by giving them names.
To do that let's take our layout above, we will use grid-template: 40px 200px 40px / [main-start] 1fr [content-start] 5fr [content-end main-end].
For create names we add []before our column or row, and we gives a name.
The instruction above says that we have 3 columns and we give a name, our 1 column name is main-start, our 2 columns name is content-start and the 3 column name is content-end and main-end (it's possible to give many names to our columns).
Now that our columns have names how we use this names ? Let's takes the example of our header the code should be grid-column: main-start / main-end we simply replace the number by the name of the column we want, of curse this also works with row.
This methos can be helpful if you have a lot of columns.