<section class="post-grid">
	<div class="post-item post-item-1">
		<p>Post Item 1</p>
	</div>
	<div class="post-item post-item-2">
		<p>Post Item 2</p>
	</div>
	<div class="post-item post-item-3">
		<p>Post Item 3</p>
	</div>
	<div class="post-item post-item-4">
		<p>Post Item 4</p>
	</div>
	<div class="post-item post-item-5">
		<p>Post Item 5</p>
	</div>
	<div class="post-item post-item-6">
		<p>Post Item 6</p>
	</div>
</section>

	$total-posts: 6;
	$ms-layout: 1 1,
				      2 1,
				      1 2,
		 		      2 2,
		          1 3,
				      2 3;

.post-grid {
		display: grid;
		display: -ms-grid; // IE11.
		grid-template-columns: repeat( 2, 1fr );
		-ms-grid-columns: 1fr 1fr;
		grid-template-rows: repeat( 3, 1fr );
		-ms-grid-rows: 1fr 1fr 1fr;
		grid-gap: 10px; 
	  height: 100vh;
}

.post-item {
		background-color: #0096ff;
		border: solid 2px blue;
		padding: 25px;
		-ms-grid-column-span: 1;
		-ms-grid-row-span: 1;

		@for $i from 1 through $total-posts {
			$position: nth( $ms-layout, $i );
			
			// Using specific class name as selector.
			.post-item-#{$i} {
				-ms-grid-column: nth($position, 1);
				-ms-grid-row: nth($position, 2);
			}
			
			// Using nth-child as selector.
			// &:nth-child( #{$i} ) {
			// 	-ms-grid-column: nth($position, 1);
			// 	-ms-grid-row: nth($position, 2);
			// }
		}
}