lifeparticle/medium_47_a.html

## medium_47_a.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>

		<style>
			.container {
				gap: 1rem;
				display: grid;
				background-color: black;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr 1fr;
				padding: 20px;
			}

			.element {
				font-size: xx-large;
				padding: 20px;
				color: #fff;
			}

			.one {
				background-color: violet;
			}

			.two {
				background-color: chocolate;
			}

			.three {
				background-color: aqua;
			}

			.four {
				background-color: aquamarine;
				grid-row: 2 / 3;
			}

			.five {
				background-color: slategrey;
				grid-row: 2 / 4;
				grid-column: 2 / 3;
			}

			.six {
				background-color: yellowgreen;
				grid-row: 2 / 3;
				grid-column: 3 / 4;
			}

			.seven {
				background-color: darkslateblue;
				grid-row: 3 / 4;
				grid-column: 3 / 4;
			}

			.eight {
				background-color: blanchedalmond;
				grid-row: 3 / 5;
				grid-column: 1 / 2;
			}

			.nine {
				background-color: brown;
				grid-row: 4 / 5;
				grid-column: 2 / -1;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="element one">1</div>
			<div class="element two">2</div>
			<div class="element three">3</div>
			<div class="element four">4</div>
			<div class="element five">5</div>
			<div class="element six">6</div>
			<div class="element seven">7</div>
			<div class="element eight">8</div>
			<div class="element nine">9</div>
		</div>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>

	<style>
	.container {
	gap: 1rem;
	display: grid;
	background-color: black;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	padding: 20px;
	}

	.element {
	font-size: xx-large;
	padding: 20px;
	color: #fff;
	}

	.one {
	background-color: violet;
	}

	.two {
	background-color: chocolate;
	}

	.three {
	background-color: aqua;
	}

	.four {
	background-color: aquamarine;
	grid-row: 2 / 3;
	}

	.five {
	background-color: slategrey;
	grid-row: 2 / 4;
	grid-column: 2 / 3;
	}

	.six {
	background-color: yellowgreen;
	grid-row: 2 / 3;
	grid-column: 3 / 4;
	}

	.seven {
	background-color: darkslateblue;
	grid-row: 3 / 4;
	grid-column: 3 / 4;
	}

	.eight {
	background-color: blanchedalmond;
	grid-row: 3 / 5;
	grid-column: 1 / 2;
	}

	.nine {
	background-color: brown;
	grid-row: 4 / 5;
	grid-column: 2 / -1;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="element one">1</div>
	<div class="element two">2</div>
	<div class="element three">3</div>
	<div class="element four">4</div>
	<div class="element five">5</div>
	<div class="element six">6</div>
	<div class="element seven">7</div>
	<div class="element eight">8</div>
	<div class="element nine">9</div>
	</div>
	</body>
	</html>