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

Question

I am using CSS grid to layout some items like this...

#container {
  display: grid;
  grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}

.item {
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}


  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item

How can I get the last row to be centered instead of left aligned? I can't guarantee the number of items so want to make the layout look right for any number of items.

Is this something I should be using flexbox for instead? Or are CSS grids a suitable use?

user_2279210 · Answer

Found a great article on how to Control Leftover Grid Items with Pseudo-selectors

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
  margin: 20px;
  padding: 20px;  
}
.item {
  grid-column: span 2;
  background: #AB47BC;
  padding: 20px;
}

/* Dealing with 2 orphan items */

.item:last-child:nth-child(3n - 1) {
  grid-column-end: -2;
}

.item:nth-last-child(2):nth-child(3n + 1) {
  grid-column-end: 4;
}

/* Dealing with single orphan */

.item:last-child:nth-child(3n - 2) {
  grid-column-end: 5;
}

user_6348157 · Answer

This should center any item inside row without using flex

.center-item {
    grid-column: 1 / -1;
}

user_15237566 · Answer

Codepen

.col-span-3 {
  grid-column: span 3 / span 3;
}

.grid {
  display: grid;
}

.w-5 {
  width: 1.25rem;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.justify-items-center {
  justify-items: center;
}

.gap-2 {
  gap: 0.5rem;
}

user_1016891 · Answer

This is my solution (as of April 23, 2018) for writing HTML emails:

#wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 0;
  grid-column-gap: 15px;
  padding: 15px 15px 0 15px;
}

.item {
  border: 1px solid #000;
  height: 200px;
  margin-bottom: 15px;
}


  
    
      
        Item 1
        Item 2
        Item 3
        Item 4
        Item 5
        Item 6
        Item 7
        Item 8
      
      
        
          See all items

What it does is, you're able to position items to the center at the very bottom of the grid wrapper. Again, like all other solutions, you can't put something inside a grid wrapper to be center-aligned in the very last row.

But at least this is a good alternative solution as a workaround.

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

8 Answers