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

Question

I use a CSS grid to lay out some elements, such as ...

#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; } 

 <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 class="item">Item</div> </div> 

How can I make the last row be centered rather than left? I cannot guarantee the number of elements, so I want the layout to look right for any number of elements.

Is this something I should use instead of flexbox? Or are CSS grids suitable?

Answer 1

I think the easiest solution would be to use flexbox with justify-content: center .

This packs all the elements in the horizontal center of the line. Then your fields push them apart.

In fully filled lines, justify-content will have no effect, since there is no free space for work .

In lines with free space (in your case, only with the last line), centering occurs.

 #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> 

Answer 2

This defeats the goal of the grid system. A grid is a two-dimensional array in which everything has X and Y values, as in a spreadsheet.

Yes, you want a system in which elements are wrapped. Flexbox meets all requirements with flex-wrap .

 #container { padding: 10px; width: calc((100px + (10px * 2)) * 4); /* item width + padding on either side times number of items */ display: flex; flex-wrap: wrap; background: blue; margin: 10px; } #container div { width: 100px; height: 100px; flex-grow: 1; background: red; margin: 10px; } 

https://jsfiddle.net/0c0hzh8t/

This makes the children occupy all available space, which, if the line is full, will be zero and will have a standard size.

If you want the size of the container to be determined automatically, delete the width property and the size of the container and its elements will be changed automatically. This is just as good, but I assume you want to determine the number of elements in a row.

Answer 3

There is no specific property for the last line to behave differently than the previous one.

However, based on the fact that you define the width of the set that corresponds to n elements in the width of the viewport, you can use Flexbox and its justify-content property.

Set it to center and it will center the last line for any number of elements.

Fragment of a stack

 html, body { margin: 0; } #container { display: flex; flex-wrap: wrap; /* allow items to wrap */ justify-content: center; /* horizontally center items */ } .item { flex-basis: calc(16.666% - 20px); /* subtract the margin from the width */ background: teal; color: white; padding: 20px; margin: 10px; box-sizing: border-box; /* make padding be included in the set width */ } 

 <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 class="item">Item</div> </div> 

Answer 4

This should center any element inside the line without using flex

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

Answer 5

This is my solution (as of April 23, 2018):

 #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; } 

 <div style="width: 100%; margin: 0 auto; text-align: center; vertical-align: middle;"> <div style="overflow: auto; height: 400px; margin-top: 15px;"> <div style="position: relative"> <div id="wrapper"> <div class="item"><div>Item 1</div></div> <div class="item"><div>Item 2</div></div> <div class="item"><div>Item 3</div></div> <div class="item"><div>Item 4</div></div> <div class="item"><div>Item 5</div></div> <div class="item"><div>Item 6</div></div> <div class="item"><div>Item 7</div></div> <div class="item"><div>Item 8</div></div> </div> <div style="position: absolute; bottom: -30px; text-align: center; margin: 0 auto; width: 100%;"> <div style="background-color: #defabc; width: 300px; margin: 0 auto; text-align: center; cursor: pointer;"> <span style="color: #000;">See all items</span> </div> </div> </div> </div> </div> 

What he does is that you can center the elements at the very bottom of the grid wrapper. Again, as with all other solutions, you cannot put anything in the shell of the grid to center alignment in the very last row.

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

Answer 6

I did not work much on grids, but as far as I know, if you want to use the Flex-box, use this code.

 #container { display: flex; flex-wrap: wrap; flex-direction: row; } .item { flex: 1; flex-basis: 16.66%; background: teal; color: white; padding: 20px; margin: 10px; } 

 <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 class="item">Item</div> </div> 

Please rate if this is helpful. Ignore if not.