I have container like this :
At the moment there is an empty case after element 5. So I would like to center the elements of the second line :
For the code i've already done :
.country-grid
display: grid
grid-template-columns: repeat(auto-fill,minmax(320px, 1fr))
This depends on the exact use case and how many grid items you are expecting. If you know you are always going to have 5 items, you could just set a specific number of columns and offset the 4th item like so:
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.grid-item {
grid-column: span 2;
}
.grid-item:nth-child(4) {
grid-column: 2 / span 2;
}
If the layout could have any number of items and you are looking at a more fluid approach when it comes to wrapping, then I'd suggest using flex for this as it's a lot simpler for setting up alignment like this:
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-item {
width: calc(100% / 3);
min-width: 320px;
}
