← Back toCSS layout

Center align one and left align the other

Written byPhuoc Nguyen
27 Aug, 2023
Using a single row to display all elements is a common pattern in web design. These elements can be divided into different groups and arranged on the left, center, or right side of the row.
You've probably seen this pattern before, like in a toolbar where the main actions are grouped and displayed at the center. Meanwhile, less important buttons are located on the left side, like a button to toggle the sidebar.
Another example is the header of a web application, where the main title is displayed at the center, and a button to go back to the previous page is on the left side.
In this post, we'll learn how to create this kind of layout. To keep it simple, let's assume that the layout consists of only two elements.
<div class="container">
<div class="container__left"></div>
<div class="container__center"></div>

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;


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

Recent posts ⚡

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