Position items in a grid

Here's what we'll cover:

• Learn how to use the grid-row-start and grid-row-end properties
• Discover how to use the shorthand grid-row and grid-column properties

Understanding the grid-row-start and grid-row-end properties

Imagine a grid made up of vertical and horizontal lines. These lines create smaller cells.

We can assign numbers to the horizontal lines starting from 1. A single cell can be identified by the line numbers at the top and bottom. The grid-row-start property indicates the horizontal line with the smaller number, while the grid-row-end property indicates the one with the larger number.

Let's take a look at an example of a grid with a single column and five rows of the same height. First, we set the display property of the container to grid, which tells the browser to treat this element as a grid container.

Next, we use the grid-template-rows property to specify the height of each row in the grid. We use the repeat() function to set the same height for all rows. This function takes two arguments: the number of times to repeat and the size of each repetition.

To create five rows, each with a height of 1fr, we use repeat(5, 1fr). The fr unit stands for "fraction", which means that each row will take up an equal portion of the available space in the grid container.
By using these properties together, we can create a simple grid with five rows of equal height.

.grid {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
}

To help you understand how the grid counts the lines, check out the demo below:

Let's say we want to merge the second and third rows into a single cell. To make that happen, we simply set the grid-row-start property to 2 and the grid-row-end property to 4.

.grid__item--highlight {
    grid-row-start: 2;
    grid-row-end: 4;
}

If a cell only occupies a single row, there's no need to define the grid-row-end property. It will automatically be defined as the number immediately following the grid-row-start value.

Using the same approach, we can switch from horizontal to vertical lines by replacing the grid-row-start and grid-row-end properties with grid-column-start and grid-column-end properties. These properties indicate the index of the vertical lines that form the grid.

Check out the demo below where we create a grid with a single row and four columns of equal width. Instead of using the grid-template-rows property as before, we'll use the grid-template-columns property. We'll once again use the repeat() function to create a pattern of columns with equal widths.

.grid {
    grid-template-columns: repeat(4, 1fr);
}

We then merge the second and third columns into a single cell that is highlighted with a gray background color.

.grid__item--highlight {
    grid-column-start: 2;
    grid-column-end: 4;
}

Making grid placement easier with grid-row

The grid-row property simplifies the process of placing an item within the grid row axis by combining the properties grid-row-start and grid-row-end.

Here's the syntax for the grid-row property:

.grid__item {
    grid-row: <row-start> / <row-end>;
}

Here, <row-start> and <row-end> refer to the line numbers on the grid, and are essentially the same as the grid-row-start and grid-row-end properties.

These values can be either a number or a keyword. We'll talk more about the usage of keywords later on in this series. For now, let's focus on the number values.

Now, let's rewrite the highlighted item we created earlier:

.grid__item--highlight {
    grid-row: 2 / 4;
}

If a cell only occupies a single row, you don't need to define <row-end>. For example, you can shorten the grid-row: 2 /3 declaration to grid-row: 2.

You can even use negative values with the grid-row property. When you use a negative value, the counting starts from the end of the grid lines instead of the beginning. This can be really helpful in certain situations.

.grid__item {
    grid-row: 1 / -1;
}

In this example, we're placing an item in the first row and extending it to the very last row of the grid.

Likewise, the grid-column-start and grid-column-end properties can be merged into the grid-column shorthand.

.grid__item {
    grid-column: <column-start> / <column-end>;
}

Simplifying placements with the grid-area property

The grid-area property is a handy shorthand that lets you combine the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties into a single value.

With grid-area, you can define an item's size and position in just one line of code. Here's how to use it:

.grid__item {
    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

To quickly define the position and size of an item in a grid, you can input all four values at once, separated by slashes. For instance, to place an item in row 2, column 3, with a height of 2 rows and a width of 3 columns, simply declare:

.grid__item--highlight {
    grid-area: 2 / 3 / 4 / 6;
}

Essentially, this is equivalent to making four separate declarations.

.grid__item--highlight {
    grid-row-start: 2;
    grid-column-start: 3;
    grid-row-end: 4;
    grid-column-end: 6;
}

By using the grid-area property, you can make your code more concise and easier to read. Plus, it lets you place items in both rows and columns simultaneously, without having to write separate declarations for each.

Conclusion

By mastering the grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties, you can position items within a grid with ease. You can use these properties individually or in combination to create cells of different sizes and shapes.

To make things even more efficient, shorthand properties like grid-row, grid-column, and grid-area can be used, reducing the amount of code required to achieve the same result.

If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

If you want more helpful content like this, feel free to follow me:

• DEV
• GitHub
• Website