How to Center Elements on the Last Row in CSS Grid

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

CSS Grid isn't suited for alignment across an entire row because of crisscrossing tracks blocking the way. Here's a detailed explanation:

Aligning grid items across the entire row/column (like flex items can)

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

This packs all items in the horizontal center of the row. Then your margins push them apart.

On fully-filled rows, justify-content will have no effect since there's no free space for it to work.

On rows with free space (in your case, only the last row), the items are 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;}

<div id="container">  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div></div>

CSS grid layout last item center

You can select the last .box in your DOM to span across both columns.

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  gap: 10px;
}

.box {
  padding: 20px;
  background-color: burlywood;
  border: 1px solid red;
}

.container .box:last-child {
 justify-self: center;
 width: calc(200px - 20px);
 grid-column-start: span 2;
}

<div class="container">
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
</div>

Left aligned last row in centered grid of elements

For what it's worth: It's now 2017 and the grid layout module does this out of the box

* {    margin:0;    padding:0;}
.container {  display: grid;  grid-template-columns: repeat(auto-fill, 100px);  grid-gap: 10px;  justify-content: center;  align-content: flex-start;  margin: 0 auto;  text-align: center;  margin-top: 10px;}.block {  background-color: #ddd;  border: 1px solid #999;  height: 100px;  width: 100px;}

<div class="container">  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div>  <div class="block">Foo</div></div>

Center The Leftover Item From The Last Row In GRID (1fr 1fr)

You can try something like this jsfiddle:

/* visibility properties */
body {
  width: 60%;
  margin: 5% auto;
}
div {
  margin: 3%;
  width: 100px;
  height: 100px;
  background-color: black;
  justify-self: center;
}
div:nth-of-type(2n) {
  background-color: red;
}

/* actual code: */
section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#last-div {
  grid-column: 1 / span 2;
}

<section>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="last-div">
</div>
</section>

N-by-2 grid, and if the last row has only a single column, center it

In your case, you can use last-child property. But you need to find the odd last element, because even last element no need to come in center place. So you can use it in the following way.

.col-xs-6
{
  display:inline-block;
  text-align:center;
}
.col-xs-6:nth-last-child(1):nth-child(odd) { /* This will find last child with odd element */
  display:inline-block;
  text-align:center;
  width:100%;
}

DEMO

How to Center Elements on the Last Row in CSS Grid