Position items in a grid

Written byPhuoc Nguyen

Created

20 Dec, 2023

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.

css

.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.

css

.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.

css

.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.

css

.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:

css

.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:

css

.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.

css

.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.

css

.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:

css

.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:

css

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

Essentially, this is equivalent to making four separate declarations.

css

.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 post 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!

Build a calendar←

Remove empty cells from the calendar→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn