As with flex items, we can set an order value on grid items. Let’s see how this affects the DOM and the appearance of our grid.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Order</title> <style> .container > * { background-color: aqua; } .container { display: grid; height: 100vh; grid-gap: 10px; } .grid-item:nth-of-type(3) { color: antiquewhite; font-size: 2em; order: -1; /*default is 0*/ } .grid-item:nth-of-type(1) { color: antiquewhite; font-size: 2em; order: 1; /*default is 0*/ } </style> </head> <body> <div class="container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> </div> </body> </html>