#2 - Carrom.html

<div class="parent">
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
</div>
<style>
  *{
    margin:0
  }
  .parent {
	display: grid;
    background:#62374e;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
    width:100%;
    height:100%;
}
.div1 { 
  grid-area: 1 / 1 / 2 / 2;
  background:#fdc57b;
  height:50px;
  width:50px;
  margin-top:50;
  margin-left:50;
  }
.div2 { 
  grid-area: 1 / 2 / 2 / 3;
  background:#fdc57b;
  height:50px;
  width:50px;
  margin-top:50;
  margin-left:100;
  }
.div3 { 
  grid-area: 2 / 2 / 3 / 3;
  background:#fdc57b;
  height:50px;
  width:50px;
  margin-top:50;
  margin-left:100;
  }
.div4 { 
  grid-area: 2 / 1 / 3 / 2;
  background:#fdc57b;
  height:50px;
  width:50px;
  margin-top:50;
  margin-left:50;
  }
</style>