demo/css-grid/gap.html

<!DOCTYPE html>
<html>
  <head>
    <title>Example 15</title>
    <meta charset="utf-8">
    <style>
	body {
		margin: 40px;
	}
	.wrapper {
        display: grid;
        grid-template-columns: 200px 40% 10em;

		background-color: #fff;
        color: #444;
        border: dashed 2px salmon;
	}

	.box {
		background-color: #444;
		color: #fff;
		border-radius: 5px;
		padding: 20px;
		font-size: 150%;
		z-index:10;

	}
   </style>
</head>

 <body>
	  
	<style>.wrapper-px { grid-gap: 20px; }</style>
	<div class="wrapper wrapper-px">
		<div class="box a">A</div>
		<div class="box b">B</div>
		<div class="box c">C</div>
		<div class="box d">D</div>
		<div class="box e">E</div>
		<div class="box f">F</div>
		<div class="box g">G</div>
		<div class="box h">H</div>
		<div class="box i">I</div>
	</div>

	<style>.wrapper-em { grid-gap: 2em; }</style>
	<div class="wrapper wrapper-em">
		<div class="box a">A</div>
		<div class="box b">B</div>
		<div class="box c">C</div>
		<div class="box d">D</div>
		<div class="box e">E</div>
		<div class="box f">F</div>
		<div class="box g">G</div>
		<div class="box h">H</div>
		<div class="box i">I</div>
	</div>

	<style>.wrapper-perc { grid-gap: 10%; }</style>
	<div class="wrapper wrapper-perc">
		<div class="box a">A</div>
		<div class="box b">B</div>
		<div class="box c">C</div>
		<div class="box d">D</div>
		<div class="box e">E</div>
		<div class="box f">F</div>
		<div class="box g">G</div>
		<div class="box h">H</div>
		<div class="box i">I</div>
	</div>

	<style>
		.wrapper-span { grid-template-columns: 200px 40% 10em 10vw; grid-gap: 2em; }
		.wrapper-span .a { grid-row: 1 / 3; grid-column: 1 / 3; }
		.wrapper-span .d { grid-row: 1 / 3; }
		.wrapper-span .g { grid-column: 2 / 4; }
		.wrapper-span .i { grid-column: 1 / 4; }
	</style>
	<div class="wrapper wrapper-span">
		<div class="box a">A</div>
		<div class="box b">B</div>
		<div class="box c">C</div>
		<div class="box d">D</div>
		<div class="box e">E</div>
		<div class="box f">F</div>
		<div class="box g">G</div>
		<div class="box h">H</div>
		<div class="box i">I</div>
		<div class="box j">J</div>
		<div class="box k">K</div>
		<div class="box l">L</div>
	</div>
	<script src="../../bin/css-polyfills.js"></script>
</body>
</html>