Center align one and left align the other

Written byPhuoc Nguyen

#Using CSS flexbox

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

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

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

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

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

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

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

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

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

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.