Left Aligned Last Row in Centered Grid of Elements

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>

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>

Flex-box: Align last row to grid

Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

.grid::after {
content: "";
flex: auto;
}

CSS Flexbox Align Itens 2 itens per rows but last row only one item

You can handle this by assign width to the parent ( not more as two child witds together). Like this