Looking to enhance my bootstrap skills, I've created these boxes based on the provided picture. However, I'm having trouble adding white spaces between the boxes as shown in the image. I've experimented with padding and margin but it doesn't seem to work consistently across all boxes. Any suggestions on how to achieve that desired spacing between the boxes? https://i.sstatic.net/bibV8.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
</style>
</head>
<body>
<div class="row grid " >
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-3 " style="background-color:red; height:200px;"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 " style="background-color:blue; height:200px;"></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-6 " style="background-color:yellow; height:200px;"> </div>
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-3 " style="background-color:burlywood; height:200px;"></div>
</div>
<div class="row grid">
<div class="col-xs-12 col-sm-6 col-md-4 offset-md-4 col-lg-3 offset-lg-0 " style="background-color:black; height:200px;"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 offset-lg-6 " style="background-color:orange; height:200px;"></div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>