PerStirpes/Re-order the appearance of grid items using the order property.html

## jsbin.yiqunud.css
.container {
  display: grid;
  grid-gap: 10px;
  height: 100vh;
}

.grid-item {
  background-color: yellowgreen;
  font-size: 40px;
}

.grid-item:nth-of-type(2) {
  order: -1;
}

.grid-item:nth-of-type(5) {
/*   order: -1; */
  grid-row: 1;
}

## jsbin.yiqunud.js
const gridContainer =
document.querySelector('.container')

function printColumns() {
  console.log('Grid Template Columns:')
  console.log(getComputedStyle(gridContainer).gridTemplateColumns)
}

## Re-order the appearance of grid items using the order property.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Re-order the appearance of grid items using the order property</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />

</head>
<body>
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
  <style id="jsbin-css">
.container {
  display: grid;
  grid-gap: 10px;
  height: 100vh;
}

.grid-item {
  background-color: yellowgreen;
  font-size: 40px;
}

.grid-item:nth-of-type(2) {
  order: -1;
}

.grid-item:nth-of-type(5) {
/*   order: -1; */
  grid-row: 1;
}
</style>
</head>
  <body>
         <div class="container">
      <div class="grid-item">Re-order the appearance of grid items using the order property</div>
      <div class="grid-item">2</div>
      <div class="grid-item">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.</div>
      <div class="grid-item">4</div>
      <div class="grid-item">In this example, we have five grid items inside a container. The container's a display grid with a 10-pixel gutter and it's taking up all the available height. Each grid item is being displayed in a linear way as per the way we've described it in our markup.
In some instances, we might find that we want to keep the order specified in our markup, but we might want to reorder how each item looks on the page. For example, we might want to reorder the elements on a mobile layout differently to how they look on tablet layout.
By default, each element has an order value of 0. If we were to go under the hood here and inspect each element, here's the order value and by default it's 0.
Each one of these values has an order value of 0. If we were to target one of our grid items -- let's say the second one -- and we gave it order one, then it moves right to the end. The reason is that everything else has an order of 0 and 2 has an order of 1.
We could also use minus values here. Let's target the fifth one. Say order-1 and it puts it to the start. Note that the order in the dom hasn't changed at all from how we specified it in our markup.
Also, note that if we specify grid column and grid row values for our grid items they will also reorder the elements. In this case, if we took off our order property and we said grid row 1, we'd get the same result.
</div>
    </div>
  </body>
</html>
<script id="jsbin-javascript">
const gridContainer =
document.querySelector('.container')

function printColumns() {
  console.log('Grid Template Columns:')
  console.log(getComputedStyle(gridContainer).gridTemplateColumns)
}
</script>


<script id="jsbin-source-css" type="text/css">.container {
  display: grid;
  grid-gap: 10px;
  height: 100vh;
}

.grid-item {
  background-color: yellowgreen;
  font-size: 40px;
}

.grid-item:nth-of-type(2) {
  order: -1;
}

.grid-item:nth-of-type(5) {
/*   order: -1; */
  grid-row: 1;
}
</script>
</body>
</html>
	.container {
	display: grid;
	grid-gap: 10px;
	height: 100vh;
	}

	.grid-item {
	background-color: yellowgreen;
	font-size: 40px;
	}

	.grid-item:nth-of-type(2) {
	order: -1;
	}

	.grid-item:nth-of-type(5) {
	/* order: -1; */
	grid-row: 1;
	}
	const gridContainer =
	document.querySelector('.container')

	function printColumns() {
	console.log('Grid Template Columns:')
	console.log(getComputedStyle(gridContainer).gridTemplateColumns)
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Re-order the appearance of grid items using the order property</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />

	</head>
	<body>
	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" href="style.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
	<style id="jsbin-css">
	.container {
	display: grid;
	grid-gap: 10px;
	height: 100vh;
	}

	.grid-item {
	background-color: yellowgreen;
	font-size: 40px;
	}

	.grid-item:nth-of-type(2) {
	order: -1;
	}

	.grid-item:nth-of-type(5) {
	/* order: -1; */
	grid-row: 1;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="grid-item">Re-order the appearance of grid items using the order property</div>
	<div class="grid-item">2</div>
	<div class="grid-item">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.</div>
	<div class="grid-item">4</div>
	<div class="grid-item">In this example, we have five grid items inside a container. The container's a display grid with a 10-pixel gutter and it's taking up all the available height. Each grid item is being displayed in a linear way as per the way we've described it in our markup.
	In some instances, we might find that we want to keep the order specified in our markup, but we might want to reorder how each item looks on the page. For example, we might want to reorder the elements on a mobile layout differently to how they look on tablet layout.
	By default, each element has an order value of 0. If we were to go under the hood here and inspect each element, here's the order value and by default it's 0.
	Each one of these values has an order value of 0. If we were to target one of our grid items -- let's say the second one -- and we gave it order one, then it moves right to the end. The reason is that everything else has an order of 0 and 2 has an order of 1.
	We could also use minus values here. Let's target the fifth one. Say order-1 and it puts it to the start. Note that the order in the dom hasn't changed at all from how we specified it in our markup.
	Also, note that if we specify grid column and grid row values for our grid items they will also reorder the elements. In this case, if we took off our order property and we said grid row 1, we'd get the same result.
	</div>
	</div>
	</body>
	</html>
	<script id="jsbin-javascript">
	const gridContainer =
	document.querySelector('.container')

	function printColumns() {
	console.log('Grid Template Columns:')
	console.log(getComputedStyle(gridContainer).gridTemplateColumns)
	}
	</script>


	<script id="jsbin-source-css" type="text/css">.container {
	display: grid;
	grid-gap: 10px;
	height: 100vh;
	}

	.grid-item {
	background-color: yellowgreen;
	font-size: 40px;
	}

	.grid-item:nth-of-type(2) {
	order: -1;
	}

	.grid-item:nth-of-type(5) {
	/* order: -1; */
	grid-row: 1;
	}
	</script>
	</body>
	</html>