0

Is it possible to auto-center CSS grid of an odd number of elements? Example 3 columns 2 rows grid is already symmetrical with 6 elements but not 5. When 5 elements are used, last 2 are aligned left & the 6th element is empty. Can these last 2 be centered using any technique?

I tried using justify-content, justify-items, align-items, etc

grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-column-gap: 0;
grid-row-gap: 0;
grid-gap: 0;
display:grid;
justify-self: stretch ;
justify-items: stretch;
justify-content: space-between;

Outcome: When an odd number of elements are used (like 5), the last 2 elements are not centered because 1 block is empty of the 6th element.enter image description here

0 Answers0