Test template with basis of 1024px list

index.pug

div.container
	- for (let i = 0; i<10; i++)
		div.element
			div.content 1
			div.controls 2

script.js

// Test function for toggling controls on/off.
var controls = document.querySelectorAll(".controls");
const toggle_controls = (e) => {
	controls.forEach((e) => { e.classList.toggle("hidden"); });
}

document.addEventListener("click", toggle_controls, false);

style.css

@supports (display: grid) {
	.container {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: 1fr;
		grid-auto-columns: 1fr;
	}
	.element {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: 7fr;
		grid-auto-columns: 3fr;
		grid-template-rows: auto;
	}
	.content {
	}
	.controls {
	}
}
@supports not (display: grid) and (display: flex) {
	.container {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.element {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		flex-basis: 1024px;
		flex-shrink: 1;
		flex-grow: 1;
	}
	.content {
		flex-grow: 7;
	}
	.controls {
		flex-grow: 3;
	}
}

.controls.hidden {
	display: none;
}

@media (min-width: 0px) and (max-width: 2048px) { .container > .element:nth-child(n + 2) { display: none; } }
@media (min-width: 2048px) and (max-width: 3072px) { .container > .element:nth-child(n + 3) { display: none; } }
@media (min-width: 3072px) and (max-width: 4096px) { .container > .element:nth-child(n + 4) { display: none; } }
@media (min-width: 4096px) and (max-width: 5120px) { .container > .element:nth-child(n + 5) { display: none; } }
@media (min-width: 5120px) and (max-width: 6144px) { .container > .element:nth-child(n + 6) { display: none; } }
@media (min-width: 6144px) and (max-width: 7168px) { .container > .element:nth-child(n + 7) { display: none; } }
@media (min-width: 7168px) and (max-width: 8192px) { .container > .element:nth-child(n + 8) { display: none; } }
@media (min-width: 8192px) and (max-width: 9216px) { .container > .element:nth-child(n + 9) { display: none; } }

/* Highlight styles, not functional. */
.container {
	border: 1px solid #000a;
}
.element {
	min-height: 50px;
	outline: 1px solid #000a;
	text-align: center;
	font-size: 40px;
}
.content {
	background: #0dccb366;
	outline: 1px solid #000a;
}
.controls {
	background: #77e6;
	outline: 1px solid #000a;
}

test-template-with-basis-of-1024px-list.markdown

Test template with basis of 1024px list

A Pen by XCanG on CodePen.

License.