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>That defeats the purpose of a grid system. A grid is a 2 dimensional array where everything has an X and Y value, like a spreadsheet.
Yes, you want a system where the items wrap. Flexbox fits the bill here because of 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 the available space, which if the row is full will be none and it'll be its standard size.
If you want the container to be sized automatically, then remove the width property and the container and its items will be resized automatically. It's just as well, but I assume you want to define the amount of items in a row.
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;
}<div class="wrapper">
<div class="grid grid--1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="grid grid--2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>