grid-area:row-start/ column-start/row-end/ column-end```html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				text-align: center;
			}

			div {
				display: grid;
				grid-template-rows: 150px 150px 150px;
				grid-template-columns: 150px 150px 150px;
			}

			p {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			p:nth-child(1) {
				background-color: red;
				/* 在此补充代码 */
                grid-area: 1/1/2/3;
			}
            
			p:nth-child(2) {
                grid-area: 1/3/3/4;
				background-color: orange;
				/* 在此补充代码 */
			}
            
			p:nth-child(3) {
                grid-area: 3/2/4/4;
				background-color: yellow;
				/* 在此补充代码 */
			}
            
			p:nth-child(4) {
                grid-area: 2/1/4/2;
				background-color: green;
				/* 在此补充代码 */
			}
            
			p:nth-child(5) {
                background-color: cyan;
                grid-area: 2/2/3/3;
			}
		</style>
	</head>

	<body>
		<div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</div>
	</body>
</html>

C__Users_1_Desktop%E9%87%8D%E6%96%B0%E5%BC%80%E5%A7%8B%E7%A7%BB%E5%8A%A8%E7%AB%AF_grid-column-start%E4%BD%9C%E4%B8%9A.html.png