I am attempting to create a layout with 3 columns, but I want any extra columns beyond a multiple of 3 to be centered instead of aligned left.
While I have made progress, the issue I'm facing is that the additional columns are not centered relative to the rows above. Instead, they are floating under the first set of columns.
For example, if there were 5 columns, it should look like this:
.col-md-4
.col-md-4
.col-md-4
.col-md-4 .offset-md-2
.col-md-4 .offset-md-2
Here is my current code:
https://jsfiddle.net/m16yctyd/5/
.hold {
width: 800px;
margin: 0 auto;
background: #ccc;
}
ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
list-style: none;
}
li {
width: 33.333%;
text-align: center;
display: inline-block;
vertical-align: middle;
margin: 30px auto;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: yellow;
}
li:nth-child(3) {
background: green;
}
li:nth-child(4) {
background: blue;
}
li:nth-child(5) {
background: orange;
}<div class="hold">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>