How do I re-order GRID cells when 2 columns become 1?

Report · Mar 19, 2023

More designer than programmer, I'm a bit late catching up with grids as a replacement for tables.

<div class="grid">
	<div class="cell">
		CONTENT 1
	</div> 
	<div class="cell">
		CONTENT 2
	</div>
</div>

<style>
.grid {
	width: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
}
</style>

^ Simple, easy way to establish two or more columns or rows. And if the viewport gets too narrow, a @media call establishing grid-template-columns: 100% narrows everything to a single column, by placing the first .cell above the second one. I can also play with new margins from there.

But what if I want to reverse the order of the two .cell divs when it switches to single-column, meaning I want the 2nd div appearing ABOVE the 1st? Is there an easy way for me to do this without revamping everything in flexbox (which has specific attributes for cell order)?

Report · Mar 19, 2023

You can target the first 'cell' using the 'first-child' selector and give it an order: 2; (same as if you were using Flexbox):

@media screen and (max-width: 768px) {

.grid {
grid-template-columns: 1fr;
}

.cell:first-child {
order: 2;
}

}

Report · Mar 19, 2023

This should do what you want and more...

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
.grid-container { 
display: grid;
grid-column-start: col 0;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);
}

.grid-container img {
vertical-align: baseline;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>CSS Grid Test</h2>
<div class="grid-container">

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

</div>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 19, 2023

I misread your question.

See the CSS Order Property.

https://www.w3schools.com/cssref/css3_pr_order.php

Nancy O'Shea— Product User, Community Expert & Moderator

How do I re-order GRID cells when 2 columns become 1?

1 Correct answer