Snippets

Shannon Briggs Dynamic responsive alternating grid squares

Created by Shannon Briggs last modified
/* flexbox 
Creates the responsive perfect squares
*/

.flex-container {
	padding: 0;
	margin: 0;
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	.flex-item {
		text-align: center;
		-ms-flex-preferred-size: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		background-position: 50%;
		background-size: cover;
		text-decoration: none !important;
		//width: 50%;
		.inner {
			text-align: center;
			-ms-flex-preferred-size: 0;
			-webkit-box-flex: 1;
			-ms-flex-positive: 1;
			flex-grow: 1;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			background-position: 50%;
			background-size: cover;
			text-decoration: none !important;
		}
		.inner:before {
			content: '';
			float: left;

		}
	}
	.flex-item:before {
		content: '';
		float: left;
	}
}

.flex-container {
    .flex-item:before {
        padding-top: 100%;
    }
}

.row:before, .row:after {display: none !important;}
/* flexbox 
Creates the alternating offset of the grid squares
*/

section#grid {
	.row {
		.col {
			position: relative;
		}
	}
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.99px) {
    section#grid {
        .row {
            .col:nth-child(4n-5){
                right: -50%;
            }
            .col:nth-child(4n-4){
                left: -50%;
            }
        }
    }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
    section#grid {
        .row {
            .col:nth-child(8n-3){
                right: -25%;

            }
            .col:nth-child(8n-2){
                left: -25%;
            }
            .col:nth-child(8n-1){
                right: -25%;
            }
            .col:nth-child(8n){
                left: -25%;
            }
        }
    }
}
<section id="grid">
    <div class="row no-gutters">
		<?php
		while ( have_rows( 'grid' ) ): the_row();
			$image = get_sub_field( 'image' );
			?>

      		<div class="col col-12 col-xs-12 col-sm-6 col-md-3">
                <div class="flex-container">
                    <div class="flex-item" style="background-image: url(<?php echo $image ?>);">
                        <div class="inner">
                            <div class="details">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

      		<div class="col col-12 col-xs-12 col-sm-6 col-md-3">
                <div class="flex-container">
                    <div class="flex-item">
                        <div class="inner">
                            <div class="details">
				                <?php
				                if (get_sub_field('heading')) {
					                echo '<div class="introText">';
					                the_sub_field('heading');
					                echo '</div>';
				                }
				                if (get_sub_field('text')) {
					                echo '<div class="fullText">';
					                the_sub_field('text');
					                echo '</div>';
				                }
				                if (get_sub_field('link')) {
					                echo '<div class="fullText">';
					                the_sub_field('link');
					                echo '</div>';
				                }
				                ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		<?php endwhile; ?>
    </div>
</section>
1
2
3
4
5
6
7
Example: 
http://shannonbriggs.com.au/hosted_images/alternating-grid-squares.jpg

Uses:
- Bootstrap 4 to create the grid columns
- Flexbox to create the perfect responsibe squares that contain content
- Wordpress plugin: Advanced Custom Fields to create a repeater field. The repeater field creates a pair of squares (an image square, and a text square). The repeater field contains sub fields for the various elements of the content (background image, heading, text, link etc)

Comments (0)