This is intro to CSS grid layout part 4 continuing from previous posts. This will specifically focus on how to position grid items based on the name of the grid lines. If you are not familiar with CSS grid layout, please refer to these posts here.
In the previous post, we went over how to position grid items based on their grid line numbers. However, it is often hard to read and understand the code when it’s using line numbers. To improve the readability and maintainability, we want to use names for the line numbers. Let’s take a look at them now.
Example
This is the one we are going to build using CSS grid layout.
HTML Code
<div class="challenge"> <div class="header">Header</div> <div class="small-box-1">Small box</div> <div class="small-box-2">Small box</div> <div class="small-box-3">Small box</div> <div class="main-content">Main content</div> <div class="sidebar">Sidebar</div> <div class="footer">Footer</div> </div>
CSS Code
.challenge {
width: 1000px;
margin: 30px auto;
display: grid;
grid-template-rows: [header-start] 100px [header-end box-start] 200px [box-end main-start] 400px [main-end footer-start] 100px [footer-end];
grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];
grid-gap: 35px;
& > * {
background-color: orangered;
padding: 15px;
color: white;
font-size: 30px;
font-family: sans-serif;
}
.header {
grid-column: col-start 1 / grid-end;
}
.sidebar {
grid-column: col-end 3 / grid-end;
grid-row: box-start / main-end;
}
.main-content {
grid-column: col-start 1 / col-end 3;
}
.footer {
grid-column: col-start 1 / grid-end;
}
}Let’s first take a look at how grid-template-rows and grid-template-columns are defined. Typically, you would just list width of each row and column and use the line number. However, in each line number position, you can have a list of names to use instead of numbers.
Name for grid-template-rows
Note that row line number 1 is before the first row which is now named header-start. Now, row line number 2 could have multiple names because it is the position where header ends but all other boxes start. That’s why we also added a name box-start at row line number 2. You can follow the similar logic for all other row numbers.
grid-template-rows: [header-start] 100px [header-end box-start] 200px [box-end main-start] 400px [main-end footer-start] 100px [footer-end];
Name for grid-template-columns
There is a difference for columns because it uses repeat with fractional units. Just putting the name before and after the repeat would be incorrect because it will not put names between those columns. We put names in the repeat keyword like this: repeat(3, [col-start] 1fr [col-end]). It means I want to put a name before and after 1fr column. In order to prevent any name conflict, CSS will automatically add numbers starting from 1.
grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];
Usage
Now you can define all element classes using names instead of line numbers. I am only going to note one class as an example here. As you can see sidebar class, it is using names. Since the sidebar is the end column of the grid, it uses col-end 3 and grid-end (3 is automatically added by CSS). The row uses box-start and main-end.
.sidebar {
grid-column: col-end 3 / grid-end;
grid-row: box-start / main-end;
}
Conclusion
It is very simple to use names instead of line numbers when positioning grid items. And it is actually recommended practice. In the next post, I will explain how to position grid items based on grid area using names.