When you are working with a grid layout, you might need to apply some properties to a specific item. In this topic, you'll explore the properties you can use to set the size and the location of each item. You can define the column and row numbers to position the item, which can be achieved by applying different properties and techniques. So, get ready to learn a lot of new things and take another step in mastering the grid layout!
Preparing the grid layout
Before we get down to the main idea of the topic, let's prepare a simple grid container:
<body>
<div class="grid-container">
<div class="grid-item item-1">item-1</div>
<div class="grid-item item-2">item-2</div>
<div class="grid-item item-3">item-3</div>
<div class="grid-item item-4">item-4</div>
<div class="grid-item item-5">item-5</div>
<div class="grid-item item-6">item-6</div>
<div class="grid-item item-7">item-7</div>
<div class="grid-item item-8">item-8</div>
<div class="grid-item item-9">item-9</div>
<div class="grid-item item-10">item-10</div>
<div class="grid-item item-11">item-11</div>
<div class="grid-item item-12">item-12</div>
<div class="grid-item item-13">item-13</div>
<div class="grid-item item-14">item-14</div>
<div class="grid-item item-15">item-15</div>
</div>
</body>There are fifteen items that will be arranged in five columns and three rows applying such a CSS styling:
.grid-container {
border: 2px solid #007BFF;
text-align: center;
padding: 5px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 50px 50px 50px;
gap: 5px;
}
.grid-item {
border: 1px solid #007BFF;
font-weight: bold;
color: #007BFF;
}Here is what you'll get as a result:
Let's move on and explore a new set of grid properties by practicing with this layout.
Specifying grid-column start & end
Now that we have the required grid layout, let's understand how you can work with specific items. In practice, you may need to specify the start and the end columns of the grid item. The grid layout provides you with more than one approach for that purpose.
The first approach is using the grid-column-start and grid-column-end properties.
.item-3 {
grid-column-start: 2;
grid-column-end: 4;
}Here, you set item-3 to start with the second column and span until the fourth column.
Another approach is applying the / operator to the shorthand version of the abovementioned properties. With it, you can achieve the same result you see above, like this:
.item-3 {
grid-column: 2 / 4;
}This combination also sets item-3 to start from the second column and span across two cells until the fourth column. Let's move to the next section and explore another way of working with grid columns.
The grid-column property
The previous section showed you how to set the starting column of the item and its end. The grid system also has a feature to specify just the column number of the item or how many cells it will span staying in its initial position with the grid-column property. Let's apply the grid-column: 2; property for .item-3 and check how it affects this item:
.item-3 {
grid-column: 2;
}This property will change the layout, so that item-3 moves to the second column.
Here, the specified item spans only one cell but what if you want it to span more, for example, two cells? You can achieve that by applying the span keyword like this: grid-column: span 2; instead of grid-column: 2;.
Now, the item will not change its location but will span two cells. As you can see, you have quite a few options to work with columns, but the grid is a two-dimensional layout. That means you can apply similar settings to rows too, which you'll learn in the next section.
Specifying grid-row start & end
When working with rows, you can do pretty much the same as with columns regarding the starting cells of the item and its end.
.item-3 {
grid-row-start: 2;
grid-row-end: 4;
}
/* Or */
.item-3 {
grid-row: 2 / 4;
}By applying the properties described above, you set item-3 to start from the second row and span cells until the fourth row in two ways:
In both cases, the result will be the layout you see above.
The grid-row property
Just like the grid-column property, grid-row is the shorthand version of grid-row-start and grid-row-end properties. It gives you the opportunity to set different properties for the grid item regarding rows. Assume that you didn't apply any properties for columns and have the layout from the first section. Let's see what will happen if you set the row number to the grid-row property.
.item-3 {
grid-row: 2;
}This sets item-3 to move to the second row:
On the other hand, you can keep the item-3 position but span across several rows:
.item-3 {
grid-row: span 2;
}This property will make item-3 span two rows like in the diagram below:
Mixing grid-column and grid-row properties
So far, all the samples of this topic apply either column or row properties. But you can also set values for both of them:
.item-3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
/* Or */
.item-3 {
grid-column: 2 / 4;
grid-row: 2 / 4;
}Both approaches will give you a result like this:
You can use the span keyword with all of these properties. Try experimenting with it and see how it affects the layout. For instance, in the case of grid-column-start: span 1 or grid-column: 2 / span 3. There are a lot of combinations that you can try.
Such combinations will place item-3 in a box that spans two columns and two rows starting from the second column and the second row.
Conclusion
This topic introduced you to four important grid item properties:
grid-column-start/grid-column-endgrid-row-start/grid-row-end
You've seen different ways of using these properties or their shorthand versions in order to set the position of the item and span the required number of cells. These properties can help you define many combinations for your layout, and it's very important you practice using all of them if you want to become fluent in working with a grid layout.