Dashboard CSS Layout

<div class="row">
	<div class="container">
		<div class="d-row">
			<div class="leftbox">
				<div class="box d-border col-1">1</div>
				<div class="box d-border col-2">2</div>
				<div class="box d-border col-1">3</div>
				<div class="rightbox">
					<div class="box col-8">8</div>
					<div class="box col-9">9</div>
					<div class="box col-10">10</div>
				</div>
				<div class="box d-border col-4 bx-col2 bx-row2">4</div>
				<div class="box d-border col-5 bx-row3">5</div>
				<div class="box d-border col-6 bx-row3">6</div>
				<div class="box d-border col-7 bx-col2">7</div>
			</div>
		</div>
	</div>
</div>

.container{
	width:1160px;
	max-width:90%;
	margin:20px auto
}
.d-row{
	display:grid;
	gap:10px
}
.box{
	padding:20px;
	font-size:30px;
	min-height:100px;
	box-sizing:border-box;
	background-color:#ebff32
}
.d-border{
	border:1px solid
}
.leftbox{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:10px;
}
.leftbox .bx-row3,
.leftbox .bx-row2,
.leftbox .bx-col2{
	background-color:#add8e6
}
.bx-col2{
	grid-column:span 2
}
.bx-row2{
	grid-row:span 2
}
.bx-row3{
	grid-row:span 3
}
.rightbox{
	display:grid;
	grid-template-columns:1fr;
	gap:10px
}
.rightbox .box{
	background-color:#43ef43
}
@media(max-width:680px){
	.leftbox{
		grid-template-columns:auto
	}
	.bx-col2,.bx-row2,.bx-row3{
		grid-row:auto;
		grid-column:auto;
	}
}