PerStirpes/Specify grid columns, rows, and areas at once with the grid-template shorthand.html

## jsbin.yiqunud.css
.container {
  display: grid;
  grid-gap: 20px;
  height: 100vh;
  grid-template: [header-top] "nav1 nav2 nav3" 1fr [header-bottom]
                 [main-top]   "main main nav3" 5fr [main-bottom]
                              / 2fr auto 1fr;
}

.container > * {
  background-color: orange;
  font-size: 40px;
}

nav:nth-of-type(1) {
  grid-area: nav1;
}

nav:nth-of-type(2) {
  grid-area: nav2;
}

nav:nth-of-type(3) {
  grid-area: nav3;
}

section {
  grid-area: main;
}

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

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

## Specify grid columns, rows, and areas at once with the grid-template shorthand.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Specify grid columns, rows, and areas at once with the grid-template shorthand</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: 20px;
  height: 100vh;
  grid-template: [header-top] "nav1 nav2 nav3" 1fr [header-bottom]
                 [main-top]   "main main nav3" 5fr [main-bottom]
                              / 2fr auto 1fr;
}

.container > * {
  background-color: orange;
  font-size: 40px;
}

nav:nth-of-type(1) {
  grid-area: nav1;
}

nav:nth-of-type(2) {
  grid-area: nav2;
}

nav:nth-of-type(3) {
  grid-area: nav3;
}

section {
  grid-area: main;
}
</style>
</head>
  <body>
 <div class="container">
      <nav>Menu 1: Specify grid columns, rows, and areas at once with the grid-template shorthand</nav>
      <nav>Menu 2: We can specify grid columns, rows, and areas in one property using the grid-template shorthand.</nav>
      <nav>Menu 3</nav>
      <section>Main: In our markup, we have three navs in a section, inside a container div, and in our CSS, our container is display-grid with a 20-pixel gutter, and it's taking up all the available height. Let's save it in this layout. We're going to have a small row on the top, and a large row underneath.
In the small row, menu one and menu two will sit next to each other. Menu three will span both rows, and it will act as a sidebar, and main will take up the rest of the space.
Let's set up some grid-template-areas. Now, we can map out what we just described. We can say nav1, nav2, nav3 across the top row, and underneath main, main, nav3. We'll need to width that up to each individual element using grid-area.
There's our basic layout. Let's set up some grid-template-rows for it. The top grid line can be called headerTop. The header is going to be 1fr tall. The next grid line will be headerBottom, and it will be the same as mainTop.
The main section will be 5fr, and mainBottom will be the name of the bottom grid line. HeaderTop is this top grid line, headerBottom and mainTop is here, and mainBottom is this grid line down here.
Finally, let's set up some grid-template-columns. The first column can be 2fr, the second can be taking up the available space, and the side-bar column can be 1fr. Here we have a grid layout which is using grid-template-areas, grid-template-rows, and grid-template-columns.
If we wanted to, we could specify all three of these in one shorthand property called grid-template. Grid-template acts as an ASCII art visualization of what our grid's going to look like.
Let's write a grid-template property. We'll start with our grid-template-areas, then we'll insert our grid-template-rows, and lastly our grid-template-columns. Now we have the same layout but it's specified a shorthand way. If we look under the hood here, we can see all our values being applied separately.
If we wanted to, we could also just pass grid-template-rows and grid-template-columns to our grid-template property if we didn't want to specify any grid-template-areas.
</section>
    </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: 20px;
  height: 100vh;
  grid-template: [header-top] "nav1 nav2 nav3" 1fr [header-bottom]
                 [main-top]   "main main nav3" 5fr [main-bottom]
                              / 2fr auto 1fr;
}

.container > * {
  background-color: orange;
  font-size: 40px;
}

nav:nth-of-type(1) {
  grid-area: nav1;
}

nav:nth-of-type(2) {
  grid-area: nav2;
}

nav:nth-of-type(3) {
  grid-area: nav3;
}

section {
  grid-area: main;
}
</script>
</body>
</html>
	.container {
	display: grid;
	grid-gap: 20px;
	height: 100vh;
	grid-template: [header-top] "nav1 nav2 nav3" 1fr [header-bottom]
	[main-top] "main main nav3" 5fr [main-bottom]
	/ 2fr auto 1fr;
	}

	.container > * {
	background-color: orange;
	font-size: 40px;
	}

	nav:nth-of-type(1) {
	grid-area: nav1;
	}

	nav:nth-of-type(2) {
	grid-area: nav2;
	}

	nav:nth-of-type(3) {
	grid-area: nav3;
	}

	section {
	grid-area: main;
	}
	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>Specify grid columns, rows, and areas at once with the grid-template shorthand</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: 20px;
	height: 100vh;
	grid-template: [header-top] "nav1 nav2 nav3" 1fr [header-bottom]
	[main-top] "main main nav3" 5fr [main-bottom]
	/ 2fr auto 1fr;
	}

	.container > * {
	background-color: orange;
	font-size: 40px;
	}

	nav:nth-of-type(1) {
	grid-area: nav1;
	}

	nav:nth-of-type(2) {
	grid-area: nav2;
	}

	nav:nth-of-type(3) {
	grid-area: nav3;
	}

	section {
	grid-area: main;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<nav>Menu 1: Specify grid columns, rows, and areas at once with the grid-template shorthand</nav>
	<nav>Menu 2: We can specify grid columns, rows, and areas in one property using the grid-template shorthand.</nav>
	<nav>Menu 3</nav>
	<section>Main: In our markup, we have three navs in a section, inside a container div, and in our CSS, our container is display-grid with a 20-pixel gutter, and it's taking up all the available height. Let's save it in this layout. We're going to have a small row on the top, and a large row underneath.
	In the small row, menu one and menu two will sit next to each other. Menu three will span both rows, and it will act as a sidebar, and main will take up the rest of the space.
	Let's set up some grid-template-areas. Now, we can map out what we just described. We can say nav1, nav2, nav3 across the top row, and underneath main, main, nav3. We'll need to width that up to each individual element using grid-area.
	There's our basic layout. Let's set up some grid-template-rows for it. The top grid line can be called headerTop. The header is going to be 1fr tall. The next grid line will be headerBottom, and it will be the same as mainTop.
	The main section will be 5fr, and mainBottom will be the name of the bottom grid line. HeaderTop is this top grid line, headerBottom and mainTop is here, and mainBottom is this grid line down here.
	Finally, let's set up some grid-template-columns. The first column can be 2fr, the second can be taking up the available space, and the side-bar column can be 1fr. Here we have a grid layout which is using grid-template-areas, grid-template-rows, and grid-template-columns.
	If we wanted to, we could specify all three of these in one shorthand property called grid-template. Grid-template acts as an ASCII art visualization of what our grid's going to look like.
	Let's write a grid-template property. We'll start with our grid-template-areas, then we'll insert our grid-template-rows, and lastly our grid-template-columns. Now we have the same layout but it's specified a shorthand way. If we look under the hood here, we can see all our values being applied separately.
	If we wanted to, we could also just pass grid-template-rows and grid-template-columns to our grid-template property if we didn't want to specify any grid-template-areas.
	</section>
	</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: 20px;
	height: 100vh;
	grid-template: [header-top] "nav1 nav2 nav3" 1fr [header-bottom]
	[main-top] "main main nav3" 5fr [main-bottom]
	/ 2fr auto 1fr;
	}

	.container > * {
	background-color: orange;
	font-size: 40px;
	}

	nav:nth-of-type(1) {
	grid-area: nav1;
	}

	nav:nth-of-type(2) {
	grid-area: nav2;
	}

	nav:nth-of-type(3) {
	grid-area: nav3;
	}

	section {
	grid-area: main;
	}
	</script>
	</body>
	</html>