<div>
<h1>gap: 20px;</h1>
<section class="grid grid-template gap">
	<div class="item logo">logo</div>
	<div class="item nav">nav</div>
	<div class="item content">content</div>
	<div class="item sidenav">sidenav</div>
	<div class="item advert">advert</div>
	<div class="item footer">footer</div>
</section>
</div>

<div>
<h1>column-gap: 20px;</h1>
<section class="grid grid-template column-gap">
	<div class="item logo">logo</div>
	<div class="item nav">nav</div>
	<div class="item content">content</div>
	<div class="item sidenav">sidenav</div>
	<div class="item advert">advert</div>
	<div class="item footer">footer</div>
</section>
</div>

<div>
<h1>row-gap: 20px;</h1>
<section class="grid grid-template row-gap">
	<div class="item logo">logo</div>
	<div class="item nav">nav</div>
	<div class="item content">content</div>
	<div class="item sidenav">sidenav</div>
	<div class="item advert">advert</div>
	<div class="item footer">footer</div>
</section>
</div>

<div>
<h1>margem nos itens</h1>
<section class="grid grid-template gap">
	<div class="item logo">logo</div>
	<div class="item nav">nav</div>
	<div class="item content">content</div>
	<div class="item sidenav">sidenav</div>
	<div class="item advert margin">advert</div>
	<div class="item footer">footer</div>
</section>
</div>

/* Grid */
.grid {
	display: grid;
}
.grid-template {
	grid-template:
		"logo nav nav" 50px
		"sidenav content advert" 150px
		"sidenav footer footer" 100px
		/ 100px 1fr 50px;
}

.gap {
	gap: 20px;
}

.column-gap {
	gap: 2px;
	column-gap: 20px;
}

.row-gap {
	gap: 2px;
	row-gap: 20px;
}

.margin {
	margin-top: 10px;
	margin-left: 20px;
	margin-bottom: 50px;
}

.logo {
	grid-area: logo;
}

.nav {
	grid-area: nav;
}

.content {
	grid-area: content;
}

.sidenav {
	grid-area: sidenav;
}

.advert {
	grid-area: advert;
}

.footer {
	grid-area: footer;
}

/* Grid Item */
.item {
	background: tomato;
	text-align: center;
	font-size: 1.5em;
}

.grid {
	max-width: 400px;
	margin: 0 auto;
	border: 1px solid #ccc;
}

h1 {
	text-align: center;
	font-size: 1.25em;
	font-weight: normal;
}

body {
	font-family: monospace;
	color: #333;
	padding-bottom: 60px;
	margin: 0px;
}

body > div {
	padding: 40px 0;
}

body > div:nth-of-type(even) {
	background: rgba(0,0,0,.03);
}

body > div > img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}