Center align the main content and left align the sidebar

Here's what we'll cover:

• Define specific areas within a grid using the grid-template-areas property.
• Position elements within those areas using the grid-area property.
• Use the justify-self property to easily align cells within the grid.

Using a single row to display all elements is a common web design pattern. These elements can be arranged on the left, center, or right side of the row, and divided into different groups.

You've probably seen this pattern before, like in a toolbar where the main actions are grouped and displayed at the center, while 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 show you how to use CSS grid to create this kind of layout. It centers the main content of the page while aligning the sidebar to the right side of the screen. Let's get started!

HTML layout

To achieve the layout we desire, we'll be using a markup that consists of two key elements: main and sidebar. The parent element acts as a container to hold these elements in place.

<div class="container">
    <div class="container__main">...</div>
    <div class="container__sidebar">...</div>
</div>

To position the main and sidebar on the page, we can target each container with its own CSS class. With this markup in place, we can now move on to styling it with CSS grid. Let's make those containers look good!

Using CSS grid

The .container CSS class is the parent element that holds our two main elements: main and sidebar. When we set the display property of the container to grid, we enable CSS Grid Layout for the root container.

To define the number of columns, their size, and their track names, we use the grid-template-columns property. In this case, we have three columns defined. The first column takes up all available space in the grid, while the second column adjusts its width according to its content. The third column also takes up all available space in the grid.

.container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

The container__main class is the container that holds the main content of our webpage. We use the grid-column property in our CSS code to specify where this container should start in the grid. To center it, we set its starting column to 2. This means that it will start in the second column of our three-column grid and take up all available space in that column. As a result, it will be positioned at the center of our layout, with equal amounts of space on either side. Any content we put inside this container will also be centered on the page.

.container__main {
    grid-column: 2;
}

Let's take a look at the demonstration and see how far we've come!

Simplifying grid layout with grid-template-areas

In this approach, we still use the display and grid-template-columns properties to create a grid and indicate the size for each column. However, we can use the grid-template-areas property to define named grid areas within our layout.

For instance, in our example, we have defined three named grid areas: an empty area represented by a dot (.), the main content area represented by main, and the sidebar area represented by sidebar. The order of these named grid areas corresponds to the order of columns we defined earlier with grid-template-columns. This makes it easier to create more complex layouts with a clean and easy-to-read structure.

.container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". main sidebar"
}

We can use the names we created earlier to place items on the grid using the grid-area property. To make it happen, we simply use the grid-area property followed by the name of the grid area we want the element to occupy. For instance:

.container__main {
    grid-area: main;
}

.container__sidebar {
    grid-area: sidebar;
}

We're telling CSS to put .container__main in the main grid area and .container__sidebar in the sidebar grid area.

Using named grid areas with grid-template-areas is a powerful way to create complex layouts easily. It lets us visually define our layout using simple names instead of having to remember column and row numbers.

Take a look at the demo below:

Moving the sidebar to the right

Now, let's shift our focus to moving the sidebar to the right. There are several ways to do this, but we'll use the margin-left property in our CSS code to position the sidebar on the grid. By setting it to auto, we'll align the container to the right side of the screen, leaving an equal amount of space between it and the main content container. This will ensure that any content placed inside this container will be aligned with the right edge of our layout.

.container__sidebar {
    margin-left: auto;
}

Take a look at the demo below:

Another option we have is to use the justify-self property and set its value to end. By doing this, we can align the sidebar to the end of its grid cell, which in this particular case, is on the right side of our layout.

.container__sidebar {
    justify-self: end;
}

By adding this code to our stylesheet, we can align .container__sidebar to the end of its grid cell. This pushes it all the way to the right side of our layout, taking up any available space there.

Using justify-self with a value of end is a simple and effective way to position any element to the right side of its grid cell in CSS Grid Layout.

Our layout looks the same as the one we made earlier:

Conclusion

To sum up, CSS grid is a powerful tool for creating flexible and complex layouts. With just a few lines of code, we can easily create grids that align elements to the center or push them to one side of the screen.

Named grid areas with grid-template-areas make it easy to define our layout visually using simple names instead of column and row numbers. This feature allows us to create more intricate layouts without the hassle of remembering complex numbers.

We can also use justify-self and margin-left properties to position elements precisely where we want them on the grid. By combining these techniques, we can create unique designs that are both functional and visually appealing.

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