CSS grid

How to add outer gap?

by isakglans

HTML

<div id="wrapper">
		<div id="content">
			<div class"box1">1</div>
			<div class"box2">2</div>
			<div class"box3">3</div>
			<div class"box4">4</div>
		</div>
	</div>

CSS

html,body {
	width:100%;
	height:100%;
  margin:0;
}
#wrapper {
	position : relative;
	height: 100%;
	width: 100%;
}
#content {
	height: 100%;
	width: 100%;
	position : absolute;
	display: grid;
	background-color: green;
	grid-gap : 1em;
	grid-template-columns: 1fr 1fr;
}

#content div {
	background-color: blue;
}

.box1 {
	grid-column: 1;
  	grid-row: 1;
}
.box2 {
	grid-column: 1;
  	grid-row: 2;
}
.box3 {
	grid-column: 2;
  	grid-row: 1;
}
.box4 {
	grid-column: 2;
  	grid-row: 2;
}