Using grid-template-columns to create up to 6 columns with grid

[Yohn]

6 columns Codepen

This also centers the items in the last row.

Is responsive, columns collapse to 1 when under 768px

This could be a potential start to possibly introducing set column counts into PioCSS without all the excess html and classes like the rows has.

I'd also like to explore different variations using the grid-template-column for main layout.. Having 1 column larger than others, but I'll play with that another day.

Show SCSS:

.grid.two {
	grid-template-columns: repeat(2, minmax(0, 1fr));

	/* Center last row with 1 item */
	> *:nth-last-child(1):nth-child(2n + 1) {
		margin-inline-start: calc(50% + (var(--pico-grid-column-gap) / 2));
		width: 100%;
	}
}

.grid.three {
	grid-template-columns: repeat(3, minmax(0, 1fr));

	/* Center last row with 1 item */
	> *:nth-last-child(1):nth-child(3n + 1) {
		grid-column: 2;
	}

	/* Center last row with 2 items */
	> *:nth-last-child(2):nth-child(3n + 1) {
		grid-column: 1 / span 2;
		margin-inline-start: calc(25% + (var(--pico-grid-column-gap) / 2));
		width: calc(50% - (var(--pico-grid-column-gap) / 2));
	}
	> *:nth-last-child(2):nth-child(3n + 1) + * {
		margin-inline-start: calc(-50% - (var(--pico-grid-column-gap) / 2));
		width: 100%;
	}
}

.grid.four {
	grid-template-columns: repeat(4, minmax(0, 1fr));

	/* Center last row with 1 item */
	> *:nth-last-child(1):nth-child(4n + 1) {
		grid-column: 2 / span 2;
		margin-inline-start: calc(25% + (var(--pico-grid-column-gap) / 4));
		width: calc(50% - (var(--pico-grid-column-gap) / 2));
	}

	/* Center last row with 2 items */
	> *:nth-last-child(2):nth-child(4n + 1) {
		grid-column: 2;
	}

	/* Center last row with 3 items */
	> *:nth-last-child(3):nth-child(4n + 1) {
		grid-column: 1 / span 2;
		margin-inline-start: calc(25% + (var(--pico-grid-column-gap) / 4));
		width: calc(50% - (var(--pico-grid-column-gap) / 2));
	}
	/* Center last row with 3 items */
	> *:nth-last-child(3):nth-child(4n + 1) + *,
	> *:nth-last-child(3):nth-child(4n + 1) + * + * {
		margin-inline-start: calc(-50% - (var(--pico-grid-column-gap) / 2));
		width: 100%;
	}
}

.grid.five {
	grid-template-columns: repeat(5, minmax(0, 1fr));

	/* Center last row with 1 item */
	> *:nth-last-child(1):nth-child(5n + 1) {
		grid-column: 3;
	}

	/* Center last row with 2 items */
	> *:nth-last-child(2):nth-child(5n + 1) {
		grid-column: 2 / span 2;
		margin-inline-start: calc(25% + (var(--pico-grid-column-gap) / 4));
		width: calc(50% - (var(--pico-grid-column-gap) / 2));
	}
	/* Center last row with 2 items */
	> *:nth-last-child(2):nth-child(5n + 1) + * {
		margin-inline-start: calc(-50% - (var(--pico-grid-column-gap) / 2));
		width: 100%;
	}

	/* Center last row with 3 items */
	> *:nth-last-child(3):nth-child(5n + 1) {
		grid-column: 2;
	}

	/* Center last row with 4 items */
	> *:nth-last-child(4):nth-child(5n + 1) {
		grid-column: 1 / span 2;
		margin-inline-start: calc(25% + (var(--pico-grid-column-gap) / 4));
		width: calc(50% - (var(--pico-grid-column-gap) / 2));
	}
	> *:nth-last-child(4):nth-child(5n + 1) + *,
	> *:nth-last-child(4):nth-child(5n + 1) + * + *,
	> *:nth-last-child(4):nth-child(5n + 1) + * + * + * {
		margin-inline-start: calc(-50% - (var(--pico-grid-column-gap) / 2));
		width: 100%;
	}
}

.grid.six {
	grid-template-columns: repeat(6, minmax(0, 1fr));

	/* Center last row with 1 item */
	> *:nth-last-child(1):nth-child(6n + 1) {
		grid-column: 3 / span 2;
		margin-inline-start: calc(25% + (var(--pico-grid-column-gap) / 4));
		width: calc(50% - (var(--pico-grid-column-gap) / 2));
	}

	/* Center last row with 2 items */
	> *:nth-last-child(2):nth-child(6n + 1) {
		grid-column: 3;
	}
	/* Center last row with 3 items */
	> *:nth-last-child(3):nth-child(6n + 1) {
		grid-column: 2 / span 2;
		margin-inline-start: calc(25% + (var(--pico-grid-column-gap) / 4));
		width: calc(50% - (var(--pico-grid-column-gap) / 2));
	}
	> *:nth-last-child(3):nth-child(6n + 1) + *,
	> *:nth-last-child(3):nth-child(6n + 1) + * + * {
		margin-inline-start: calc(-50% - (var(--pico-grid-column-gap) / 2));
		width: 100%;
	}

	/* Center last row with 4 items */
	> *:nth-last-child(4):nth-child(6n + 1) {
		grid-column: 2;
	}
	/* Center last row with 5 items */
	> *:nth-last-child(5):nth-child(6n + 1) {
		grid-column: 1 / span 2;
		margin-inline-start: calc(25% + (var(--pico-grid-column-gap) / 4));
		width: calc(50% - (var(--pico-grid-column-gap) / 2));
	}
	> *:nth-last-child(5):nth-child(6n + 1) + *,
	> *:nth-last-child(5):nth-child(6n + 1) + * + *,
	> *:nth-last-child(5):nth-child(6n + 1) + * + * + *,
	> *:nth-last-child(5):nth-child(6n + 1) + * + * + * + * {
		margin-inline-start: calc(-50% - (var(--pico-grid-column-gap) / 2));
		width: 100%;
	}
}

@media (max-width: 768px) {
	.grid.two,
	.grid.three,
	.grid.four,
	.grid.five,
	.grid.six {
		grid-template-columns: 1fr;
	}
	.grid.two {
		> *:nth-last-child(1):nth-child(2n + 1) {
			margin-inline-start: 0;
			width: 100%;
		}
	}

	.grid.three {
		> *:nth-last-child(1):nth-child(3n + 1),
		> *:nth-last-child(2):nth-child(3n + 1),
		> *:nth-last-child(2):nth-child(3n + 1) + * {
			grid-column: span 1;
			margin-inline-start: 0;
			width: 100%;
		}
	}

	.grid.four {
		> *:nth-last-child(1):nth-child(4n + 1),
		> *:nth-last-child(2):nth-child(4n + 1),
		> *:nth-last-child(2):nth-child(4n + 1) + *,
		> *:nth-last-child(3):nth-child(4n + 1),
		> *:nth-last-child(3):nth-child(4n + 1) + *,
		> *:nth-last-child(3):nth-child(4n + 1) + * + * {
			grid-column: span 1;
			margin-inline-start: 0;
			width: 100%;
		}
	}

	.grid.five {
		> *:nth-last-child(1):nth-child(5n + 1),
		> *:nth-last-child(2):nth-child(5n + 1),
		> *:nth-last-child(2):nth-child(5n + 1) + *,
		> *:nth-last-child(3):nth-child(5n + 1),
		> *:nth-last-child(3):nth-child(5n + 1) + *,
		> *:nth-last-child(3):nth-child(5n + 1) + * + *,
		> *:nth-last-child(4):nth-child(5n + 1),
		> *:nth-last-child(4):nth-child(5n + 1) + *,
		> *:nth-last-child(4):nth-child(5n + 1) + * + *,
		> *:nth-last-child(4):nth-child(5n + 1) + * + * + * {
			grid-column: span 1;
			margin-inline-start: 0;
			width: 100%;
		}
	}

	.grid.six {
		> *:nth-last-child(1):nth-child(6n + 1),
		> *:nth-last-child(2):nth-child(6n + 1),
		> *:nth-last-child(3):nth-child(6n + 1),
		> *:nth-last-child(3):nth-child(6n + 1) + *,
		> *:nth-last-child(3):nth-child(6n + 1) + * + *,
		> *:nth-last-child(4):nth-child(6n + 1),
		> *:nth-last-child(5):nth-child(6n + 1),
		> *:nth-last-child(5):nth-child(6n + 1) + *,
		> *:nth-last-child(5):nth-child(6n + 1) + * + *,
		> *:nth-last-child(5):nth-child(6n + 1) + * + * + *,
		> *:nth-last-child(5):nth-child(6n + 1) + * + * + * + * {
			grid-column: span 1;
			margin-inline-start: 0;
			width: 100%;
		}
	}
}