Position items in a grid
Tags: webdev, css, learning, tutorial
Published: 2024-03-05 01:49:34

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:

{% codepen https://codepen.io/phuocng/pen/BaENwRR %}

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.

{% codepen https://codepen.io/phuocng/pen/VwNLMWL %}

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;
}
```

{% codepen https://codepen.io/phuocng/pen/PogqJjW %}

## 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;
}
```

{% codepen https://codepen.io/phuocng/pen/MWRwEoB %}

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>;
}
```

{% codepen https://codepen.io/phuocng/pen/VwNLMzv %}

## 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 series helpful, please consider giving the [repository](https://github.com/phuocng/css-grid) 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](https://dev.to/phuocng)
-   [GitHub](https://github.com/phuocng)
-   [Website](https://phuoc.ng)