blog page as grid

home.php

@@ -29,7 +29,6 @@ $posts_style = get_theme_mod( 'understrap_posts_index_style' );
 			<?php get_template_part( 'global-templates/left-sidebar-check', 'none' ); ?>
 			<?php if ( 'masonry' === $posts_style ) : ?>
 			<div class="card-columns"><?php endif; ?>
-
 				<main class="site-main" id="main">
 
 					<?php if ( have_posts() ) : ?>
@@ -40,9 +39,13 @@ $posts_style = get_theme_mod( 'understrap_posts_index_style' );
 
 							<?php
 							if ( 'masonry' === $posts_style ) :
-								get_template_part( 'loop-templates/content-card' );
+								get_template_part( 'loop-templates/content', 'card' );
+							elseif ( 'grid' === $posts_style ) :
+
+								get_template_part( 'loop-templates/content', 'grid' );
 							else :
-								/* Include the Post-Format-specific template for the content.
+								/*
+								 * Include the Post-Format-specific template for the content.
 								 * If you want to override this in a child theme, then include a file
 								 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
 								 */

inc/customizer.php

@@ -142,6 +142,7 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
 					'choices'     => array(
 						'default'       => __( 'Default', 'understrap' ),
 						'masonry' => __( 'Masonry', 'understrap' ),
+						'grid' => __( 'Grid', 'understrap' ),
 					),
 					'priority'    => '30',
 				)

loop-templates/content-grid.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Partial template to display latest posts (home.php) as grid.
+ *
+ * @package understrap
+ */
+
+?>
+<a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark">
+	<div class="col-md-4 col-xs-12">
+
+
+		<div class="card card-inverse ">
+
+			<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
+				<?php $alt = get_post_meta( get_post_thumbnail_id( $post->ID ), '_wp_attachment_image_alt', true ); ?>
+				<img class="card-img "
+				     src="<?php echo esc_html( get_the_post_thumbnail_url( $post->ID, 'large' ) ) ?>" alt="<?php echo esc_html( $alt ); ?>">
+
+				<div class="card-img-overlay">
+
+					<header class="entry-header">
+						<h4 class="card-title"><?php the_title(); ?></h4>
+
+						<?php if ( 'post' === get_post_type() ) : ?>
+
+							<p class="entry-meta card-text">
+								<small>Posted: <?php the_date(); ?> at: <?php the_time();  ?></small>
+							</p>
+
+						<?php endif; ?>
+
+					</header>
+
+				</div>
+
+			</article>
+
+
+		</div>
+
+
+	</div>
+</a>