grid-layout.html

<!-- START OF THE FLEX CONTAINER, THE UNORDERED LIST -->
<ul class="grid-wrap">

	<!-- WP LOOP STARTS HERE -->
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<!-- LIST ITEM FOR EACH POST -->
		<li class="grid-item">

			<!-- FEATURED IMAGE FOR THE POST -->
			<p>
				<?php if ( has_post_thumbnail() ) : ?>
                        		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'large' ); ?></a>
				<?php endif; ?>
			</p>

			<!-- POST TITLE -->
			<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

			<!-- POST METADATA -->
			<p class="author-text">Posted on <?php echo the_time('F jS, Y');?> by <?php the_author_posts_link(); ?> </p>            
			<!-- POST EXCERPT -->
			<?php the_excerpt(); ?>

			<?php endwhile; ?>
			<?php endif; ?>

		<!-- END OF THE LIST ITEM -->
		</li>

	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>></div>

<!-- END OF THE FLEX CONTAINER -->      
</ul>