Align items in a grid

Written byPhuoc Nguyen

Created

29 Dec, 2023

Here's what we'll cover:

Learn how to vertically align items using the `align-self` property
Discover how to horizontally align items using the `justify-self` property

In the previous post, we learned how to create a vertical timeline using CSS grid. To structure each item, we used three additional `div` elements: one for the event's date or time, another as a separator, and a third for the content related to that event.

Check out the preview below to see the timeline we created earlier:

The content featured in the timeline is from The History of the Web

As you can see, all the items are vertically aligned at the top by default. In this post, we'll learn how to align items both horizontally and vertically.

#Aligning items vertically using the align-self property

Let's say you want to align the date or time of each item in the middle vertically. Well, you can use the `align-self` property in CSS grid to do just that. This property allows you to control the vertical alignment of individual grid items within their respective grid areas.

The `align-self` property is a powerful tool that can help you achieve the perfect alignment for your grid items. With it, you can override the default vertical alignment of grid items and specify how each item should be aligned along the cross-axis of its grid area. The `align-self` property can take various values, such as `start`, `end`, `center`, `stretch`, and `baseline`.

For instance, if you set the value of `align-self` to `start`, the item will align to the start of its grid area. Similarly, when you set it to `end`, it will align at the end of its grid area. If you set it to `center`, it will align at the center of its grid area. On the other hand, if you set it to `stretch`, it will stretch vertically to fill up its entire grid area.

But that's not all. When you set the value of `align-self` to `baseline`, the item will align with the baseline of its parent container. This is useful when dealing with text or elements that need to line up with each other's text baselines.

In our case, we set `align-self: center` for the date items to vertically center it relative to its parent container. This effectively aligns each date or time with its corresponding content `div` and creates a more visually appealing and balanced timeline.

css

.timeline__date {
    align-self: center;
}

Take a look at the demo below to see how this modification impacts the timeline!

#Aligning items horizontally with justify-self property

CSS grid has a handy property called `justify-self` that allows you to align individual grid items horizontally.

The `justify-self` property controls the horizontal alignment of each item within its respective grid area. You can set it to different values such as `start`, `end`, `center`, or even `stretch`.

When set to `start`, an item will align with the left edge of its grid area. When set to `end`, it aligns with the right edge. And when set to `center`, it will align in the middle.

To align the separators, we'll use this property. First, we turn the separator into a dot. We make it a perfect circle by setting the `border-radius` property to `50%`. Then, we create a uniform circular shape by setting the `height` and `width` properties to the same value, like `1rem`.

css

.timeline__separator {
    background: rgb(203 213 225);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
}

To center the dot both vertically and horizontally, we can use the `align-self` and `justify-self` properties. These properties give us control over the alignment of individual grid items within their respective grid areas. By setting both values to `center`, we can center the dot perfectly within its parent container.

css

.timeline__separator {
    align-self: center;
    justify-self: center;
}

This will align each dot connector with its corresponding date and content, resulting in a much more visually appealing timeline. Check out what it looks like:

#Adding a vertical line to our timeline

Now that we've replaced each item separator with a dot, we need to add a vertical line to separate the date and content of each item.

We can use the `::before` pseudo-element in CSS to create this line. This element allows us to insert content before the content of an element.

To get started, we need to set the `.timeline` class to `position: relative`. This is important because we want our vertical line to be positioned absolutely within this container.

css

.timeline {
    position: relative;
}

To create our vertical line, we'll add a `::before` pseudo-element to our `.timeline` class. We'll make sure the `content` property is set to an empty string (`''`) and give it an `absolute` position. The `top` property will be set to 0 so the line starts at the top of our container. To make it span the entire height of the timeline, we'll set the `height` property to 100%. Lastly, we'll give it a `width` of 1px to create a thin vertical line.

css

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 6.5rem;
    height: 100%;
    width: 1px;

    background: rgb(203 213 225);
}

Note that we've used the `left` property to position the vertical line at the center of each dot on the timeline. You can adjust this value according to your design preferences. In our example, it's calculated as the sum of the width of date items (`5rem`), the gap between grid items (`1rem`), and half of the dot (`0.5rem`).

With these changes, our timeline now has a clear separation between each date or time `div` and its corresponding content `div`.

#Conclusion

With CSS Grid's `align-self` and `justify-self` properties, we can align items both vertically and horizontally within their respective grid areas. This creates visually appealing and balanced layouts, just like our vertical timeline.

To control the vertical alignment of individual items, we use the `align-self` property. And to control their horizontal alignment, we use the `justify-self` property. We can easily set these properties to values like `center`, `start`, or `end` to achieve our desired layout. It's that simple!

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!

Center align the main content and left align the sidebar←

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