body {
	padding: 20px;
}

.wrapper {
	width: 100%;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	text-align: center;
}

.box {
	background-color: #EEA236;
	color: azure;
	font-size: 0.75rem;
	padding: 20px 0;
	border-radius: 5px;
}

/* link style */
a {
	color: yellow;
}

.wrapper :hover {
	background-color: #000000;
}

a :visited {
	
}

/* box style */
.a {
	grid-column: 1;
	grid-row: 1;
	background-color: blue;
}

.b {
	grid-column: 2;
	grid-row: 1;
	background-color: red;
}

.c {
	grid-column: 3;
	grid-row: 1;
	background-color: deeppink;
}

.d {
	grid-column: 1/4;
	grid-row: 2;
	background-color: olivedrab;
}

.e {
	grid-column: 1;
	grid-row: 3;
	background-color: saddlebrown;
}

.f {
	grid-column: 2;
	grid-row: 3;
	background-color: indianred;
}

.g {
	grid-column: 3;
	grid-row: 3/5;
	background-color: chocolate;
}

.h {
	grid-column: 1;
	grid-row: 4;
	background-color: darkgray;
}

.i {
	grid-column: 2;
	grid-row: 4;
	background-color: fuchsia;
}