How to vertically center align an element to the last row in CSS Grid?

Question

I'm laying out some items using a CSS grid, 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;}&lt;divid="contain

P粉680000555 · Answer

Found a great method on how to control remaining grid items using pseudo-selectors in this article: 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;
}

/* 处理两个孤立项 */

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

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

/* 处理单个孤立项 */

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

P粉193307465 · Answer

CSS Grid is not suitable for alignment across entire rows because crossing rails would get in the way. Here's a detailed explanation:

Align grid items to entire rows/columns (similar to flex items)

As an alternative, use flexbox and set justify-content: center.

This will pack all items in the horizontal center of the row. Your margins will then separate them.

On fully populated rows, justify-content will not work because there is no free space for it to work .

On rows with free space (in your case, only the last row), the items will appear centered.

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}


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