I am using CSS grid to layout some items like this...
#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 get the last row to be centered instead of left aligned? I can't guarantee the number of items so want to make the layout look right for any number of items.
Is this something I should be using flexbox for instead? Or are CSS grids a suitable use?