facetwp basic 3 column responsive grid

djrmom

{{gist file=”display.php” lang=”php”}}
<div class=”fwp-grid”>
<?php while ( have_posts() ) : the_post(); ?>
<div class=”fwp-grid-col”>
<?php if ( has_post_thumbnail() ) : ?>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<?php the_title( ‘<h3><a href=”‘ . esc_url( get_the_permalink() ) . ‘”>’, ‘</a></h3>’ ); ?>
</div>
<?php endwhile; ?>
</div>
{{/gist}}{{gist file=”grid.css” lang=”css”}}
.fwp-grid {
display: flex;
flex-direction: row;
flex-flow: wrap;
justify-content: flex-start;
width: 100%;
}

@media (max-width: 400px) {
.fwp-grid {
display: block;
}
}

.fwp-grid .fwp-grid-col {
padding: 1em 1em 1em 2em;
width: 33.3%;
text-align: center;
}

@media (max-width: 800px) {
.fwp-grid .fwp-grid-col {
width: 50%;
}
}

@media (max-width: 400px) {
.fwp-grid .fwp-grid-col {
width: 100%;
}
}

.fwp-grid .fwp-grid-col h3 {
padding-top: .25em;
}

.fwp-grid img {
max-width: 100%;
}
{{/gist}}