How to center elements on the last row in CSS Grid?

For a while, I’ve been searching for a flexible layout that meets these criteria:

In the past, I settled for solutions that don’t meet all my criteria, however, with the current state of CSS, I thought it must be possible.

My CSS mentor Kevin Powell recently did a live YouTube responsive layouts workshop. If there is someone who knows how to achieve this, that is Kev.

At some point in the video 1:50:55, Kev had a grid on his screen and somebody asked to center the last row elements.

His response was both dissapointing and hopeful; “That’s something I wouldn’t be able to do with grid… I wouldn’t use grid, in that case I would use flexbox“.

This got me started on a quest to find a solution using flexbox.

Since we are using the page builder YOOTheme Pro in this website, we can easily use the editor to add a Grid, and configure the settings to achieve the desired result.

At first sight, this grid meets all the criteria, so let’s start by looking at the source code. You are welcome to inspect it in your browser as well.

This is the HTML when there are 4 columns showing.

The main code to achieve this is a simple flexbox that justifies the content in the centre.

Flexbox is also allowing all the items in the same row to have the same height.

Then, they use percentages to control the column width based on the screen size, so there is a fair bit of code behind this, which is totally fine.

Also, for the gap between the elements, they are using a left padding on the elements, and a negative padding on the wrapper, to even out the first element of each row.

In conclusion, this is a good approach and I would just need to define the number of columns according to the screen width as I did in the settings of YOOTheme Pro.

However, it is not as portable as I would like, because I would need to pre-define break points for the media queries, which may be different in other projects.

Also, telling the number of columns in various screen sizes, is not as elegant as simply defining the minimun size of the items.

So, here’s my quest to find such solution:

Using flexbox by default almost worked perfectly, except for the last column, that stretched the item to take the full width of the row.

The solution for this is simple, just use

Luckily, I came across the article Controlling Leftover Grid Items with Pseudo-selectors where the author finds a solution to center elements in the last row of grid.

This is a very clever solution, just assign 2 cells to every item, then move the item in the last row to the desired position.

In the image above, the last item is targetted in CSS, by selecting the last element, that is also an odd number. Keep in mind, that another way to say “odd numbers” is by selecting the multiples of 2, then adding a unit to it: 2n + 1.

Then, we just tell this item to end in line #4. As you can see in the image, lines are placed at the beginning at the end and at the gaps.

When there are 2 item in the last row, we need to select the second last element that also follows the sequence 4, 7, 10, 13… And tell it to finish in line #4.

Then, the actual last item will be automatically placed in the right spot as it remains next to the second last.

So let’s start by defining a couple of variables:

• Item width
• Grid gap

To understand what we are doing here, I’m assuming that you understand how display:grid; works, so the display and grid-gap attributes should be self-explanatory. If not, you can check these great videos on Grid.

The tricky line to understand is grid-template-columns. We are using repeat to define the columns. Repeat has 2 arguments:

The first argument defines the number of times that the track list should be repeated. We’ve used auto-fit in this case which automatically adjust the number of repetitions to the largest possible number that doesn’t cause the grid to overflow.

The second argument is using a minmax() function, where we define the minimum and maximum width of our columns, but remember, our items occupy 2 columns + a gap.

Let’s start by explaining the first argument of the minmax(), which defines the minimum width.

Do you remember we defined the min-width of the elements as a variable? Let’s use the defined values as examples for our grid.

But, what if the user is using a super narrow phone? Well, in that case, we want the minimum width of the item to be 100% to prevent horizontal scrolling. Since the item is occupying 2 columns, we get: X% + 20px + X% = 100%, which explains the following calculation:

Now, we put those two calculations as arguments inside the function min(), which will automatically select the smallest of the two, and that’s the first argument of our minmax().

The second argument of our minmax() is the maximum widht, which we’ve defined as 1fr, which represents a “fraction” of the available space in the grid container. 

Now, it’s time to use container queries to determine the number of columns. Let’s start with 2 column layouts.

In this container query, we are targetting a min-width that just allows for 2 items to display side by side, and a max-width just before 3 items are displayed in the same row.

Unfortunately, CSS variables don’t work in media queries or container queries, so the code you just saw above won’t work, unfortunately. For now, I have to manually edit this to give fixed values that match our variables var(–min-width) and var(–grid-gap).

Having said that. I’m writing for example 200px*2 instead of 400px, so it’s quick to replace.