Center align one and left align the other

Written byPhuoc Nguyen

Created

27 Aug, 2023

#Using CSS flexbox

Initially, our first idea might be to use flexbox to arrange the layout.

css

.container {
  display: flex;
  justify-content: center;
}

To align the first element to the left and center the remaining items, we can use the margin property. Here's an example:

css

.container__left {
    margin-right: auto;
}
.container__center {
    margin-right: auto;
}

Let's take a look at what it looks like:

Unfortunately, our expectation doesn't match reality. The main element is centered only within the available space, not the entire container. Let's move on to the next section to find a solution to this issue.

#Using CSS grid

In addition to CSS flexbox, CSS offers another powerful tool for creating layouts: CSS grid. We can use this technique to solve the issue we talked about earlier.

Let's say we now have three elements in our layout instead of two, and we need to add an empty element on the right-hand side.

css

.container {
    display: grid;
    grid-template-columns: 1fr repeat(1, auto) 1fr;
}

Let's dive into some CSS talk. The first CSS declaration is simple: it replaces the `flex` value with `grid`, which tells the browser to create a grid layout.

Now, the second CSS declaration might seem confusing, but it's actually quite easy to understand. The `1fr` means that the first and last columns should take up an equal amount of space. The `repeat(1, auto)` declaration means that there should be one column with a width of `auto`.

So, in simpler terms, this CSS declaration creates a layout with three columns. The first and last columns will have equal width, while the middle column will adjust its width to fit its content.

Lastly, we want the main element to start at the second column. So, we can set the `grid-column-start` property to 2.

css

.container__center {
    grid-column-start: 2;
}

Now, it's a breeze to move the first column to the left.

css

.container__left {
    margin-right: auto;
}

Finally, let's check out the demonstration to see the progress we've made so far!

Replacing the non-existing third column with the real one is a piece of cake. All you need to do is push it to the right using a single CSS declaration.

css

.container__right {
    margin-left: auto;
}

#Usages

In addition to the sample usages mentioned earlier, I've been using this technique to create a layout that centers the main content of the page while aligning the sidebar to the right side of the screen.

Here's an example of what the layout looks like:

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!

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