<ul class="grid list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
.grid {
	--cols: 3;
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(Max(calc(100% / var(--cols, 1)), 250px), 1fr)
	);
}

.list {
	padding: 0;
	list-style: none;

	li {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;

		background-color: tomato;
		color: white;
		border: 1px solid white;

		font-family: sans-serif;
		font-weight: 600;
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.