Unable to use margins inside CSS grid

I am trying to build a CSS grid layout with margins around the elements within the grid cells. However, severeal problems arise…

Here is my code:

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.grida{
	position:fixed;
	left:0; top:29px; width:100%;
	height:calc(100% - 29px);
	overflow:hidden;
	display:grid;
	grid-template-columns:134px 34% auto;
}

.wrapa{
	padding-top:5px;
	background:#eee;
	margin:5px;
	border:2px solid green;
	border-radius:9px;
}

.inpsearch, .inptags{
	display:block;
	width:100%;
	line-height:21px;
	outline:none;
	padding:0 9px;
	background:white;
	margin:5px;
	border:2px ridge gold;
	border-radius:9px;
}

.titles{
	height:calc(100% - 40px);
	overflow-y:scroll;
	padding:9px 0;
	margin:5px;
	border:2px ridge gold;
	border-radius:5px;
}

.storytxt{
	display:block;
	padding:14px;
	width:100%;
	height:calc(100% - 40px);
	outline:none;
	resize:none;
	overflow-y:scroll;
	background:#eee;
	margin:5px;
	border:2px ridge gold;
	border-radius:9px;
}

<div class='grida'>
<div class='wrapa'>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
</div>
<div class='wrapb'>
<input type='search' class='inpsearch' placeholder='SEARCH'>
<div class='titles'>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
</div>
</div>
<div class='wrapc'>
<input type='text' class='inptags' placeholder='TAGS'>
<textarea class='storytxt'></textarea>
</div>
</div>

These are my problems:

Why is there no space between the HTML elements with classes inpsearch and inptags? (in the upper part of the visual output) Why are parts of the HTML elements with classes inptags and storytxt not visible on the right? (int the lower part of the visual output)

Any help?

Solution

I would do this way.

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.grida{
	position:fixed;
	left:0; top:29px; width:100%;
	height:calc(100% - 29px);
	overflow:hidden;
	display:grid;
	grid-template-columns:134px 34% auto;
}

.wrapa{
	padding-top:5px;
	background:#eee;
	margin:5px;
	border:2px solid green;
	border-radius:9px;
}

.wrapb, wrapc{
	padding: 0 10px;
}

.inpsearch, .inptags{
	display:block;
	width:100%;
	line-height:21px;
	outline:none;
	padding:0 9px;
	background:white;
	margin-bottom:5px;
	border:2px ridge gold;
	border-radius:9px;
}

.titles{
	height:calc(100% - 40px);
	overflow-y:scroll;
	padding:9px 0;
	border:2px ridge gold;
	border-radius:5px;
}

.storytxt{
	display:block;
	padding:14px;
	width:100%;
	height:calc(100% - 40px);
	outline:none;
	resize:none;
	overflow-y:scroll;
	background:#eee;
	border:2px ridge gold;
	border-radius:9px;
}

<body>
<div class='grida'>
<div class='wrapa'>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
</div>
<div class='wrapb'>
<input type='search' class='inpsearch' placeholder='SEARCH'>
<div class='titles'>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
</div>
</div>
<div class='wrapc'>
<input type='text' class='inptags' placeholder='TAGS'>
<textarea class='storytxt'></textarea>
</div>
</div>
</body>

So you need to:

add to wrapb and wrapc a padding: padding: 0 10px
remove the margin from titles and storytxt
replace margin: 5px in inpsearch and inptags with margin-bottom: 5px