Align items in a grid

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.

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

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

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

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

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