使用网格模板区域，但元素显示不规则

Question

我正在使用网格创建一个布局，先显示和img，然后显示p个元素，然后下一行显示p和img，因此关闭顺序。但是在此代码之后，它在第一行中并排显示前两个图像，而在下一行中并排显示p个元素的下一个图像，为什么不按网格模板区域顺序显示它们呢？这是我想到的唯一实现这种布局的方法。感谢您的帮助。

#story{
	    background: linear-gradient(#4B7992, #090D19);
		display: flex;
	}

	#story article{
		display:grid;
		grid-template-columns: 1fr 1fr;
	    grid-template-areas: 
		"a b"
		"c d"
		"e f";
		grid-column-gap: 10px;
		grid-template-rows: auto;
	}
	
	#story article img:first-of-type{
		grid-area: a;
	}
	
	#story article p:first-of-type{
		grid-area: b;
	}
	
	#story article p:nth-child(2){
		grid-area: c;
	}
	
	#story article img:nth-child(2){
		grid-area: d;
	}
	
	#story article img:last-of-type{
		grid-area: e;
	}
	
	#story article p:last-of-type{
		grid-area: f;
	}
	
	#story h1{
		flex:100%;
		padding:30px 0px;
	}

	#story h2{
		background: #4B7992;
		padding: 20px 15px 30px;
		text-align: center;
	}

	#story img{
		padding: 30px 10px 20px;
	}

	#story p {
		padding:15px 10px 16px;
		line-height: 30px;
	}

<section id="story">
		
		<h1>THE STORY</h1>
		
		<h2>From the creators...</h2>
		
		<article>
		
			<img src="images/story1.png" alt="Story 1">

			<p>Based on ....</p>

			<img src="images/story2.jpg" alt="Story 2">

			<p>More....</p>

			<img src="images/story3.png" alt="Story 3">

			<p>End...</p>
		</article>
	</section>