为什么此网格不起作用？

Question

.container {
			display:grid;
			grid-template-rows:repeat(6,1fr);
			grid-template-columns:repeat(3,1fr);
			width:100%;	
			grid-gap:10px;
			min-height:300px;
			font-size:40px;
			grid-template-areas:
			"header header header"
			"content content about"
			"info content info"
			"info content info"
			"footer footer footer"


		}	

		.header {
			background-color:pink;
			grid-area:header;
		}

		.content {
			background-color:green;
			grid-area:content;
		}

		.about {
			background-color:yellow;
			grid-area:about;
		}

		.info {
			background-color:red;
			grid-area:info;
		}

		.footer {
			background-color:chocolate;
			grid-area:footer;
		}

<div class="container">
		<div class="header">Header</div>
		<div class="content">Content</div>
		<div class="about">About</div>
		<div class="info">Info</div>
		<div class="footer">Footer</div>

	</div>

您好，我正在尝试学习grid-template-areas。现在，我遇到了一个问题，即“内容”没有在中心传播3行。谁能解释我为什么不移动并破坏整个代码？预先感谢。