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

Forum|Forum|2 years ago
March 19, 2023
3 replies
475 views

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)?

Code

This topic has been closed for replies.

Correct answer osgood_

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;
}

}

Nancy OShea

Community Expert

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

Nancy OShea

Community Expert

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

O

osgood_Correct answer

Legend

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;
}

}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded