为什么在使用CSS网格时，网格自动行不起作用？

Question

我正在尝试使用CSS网格做一些UI。我需要在页面底部制作一条细条。我决定使用grid-auto-rows，但是由于某种原因，它不起作用。浏览器完全不考虑此属性，但是在开发人员的工具中，它是有序的。请告诉我我的错误是什么？

* {
	margin: 0;
	padding: 0;	
}
#back-lr {
	position: fixed;
	z-index: 1;
	width: 100vw;
	height: 100vh;

	background-image: url(../img/space.jpg);
	background-size: 100%;
}
#front-lr {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 3;

	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(6, 1fr);
	grid-auto-rows: 50px;
	
}
#front-lr div {
	background-color: red;
	grid-row: 6/6;
	grid-column: 3/6; 
	
}

	<div id="main-cont">
		<div id="back-lr">
			
		</div>
		<div id="mid-lr">
			
		</div>
		<div id="front-lr">
			<!-- <div id="controll-menu"></div> -->

			<div id="controll-bar">
				<div class="app-plank"></div>
				<div id="serv-plank"></div>
			</div>

		</div>
	</div>