Breaking out with CSS Grid in Genesis

This tutorial provides the steps to create and use a custom page template for a fixed width content with full-width images (or any other content) based on this article from cloudfour in Genesis.

While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme.

Step 1

Create a file named say, template-breakout.php having the following:

<?php
// Template Name: Break Out

add_filter( 'body_class', 'break_out_body_class' );
/**
 * Adds a css class to the body element
 *
 * @param  array $classes the current body classes
 * @return array $classes modified classes
 */
function break_out_body_class( $classes ) {
    $classes[] = 'break-out';

    return $classes;
}

add_action( 'genesis_entry_header', 'custom_entry_header_wrap_open', 7 );
function custom_entry_header_wrap_open() {
    echo '<div class="wrap">';
}

add_action( 'genesis_entry_header', 'custom_entry_header_wrap_close' );
function custom_entry_header_wrap_close() {
    echo '</div>';
}

// Force full width content.
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

genesis();

Step 2

Add the following in child theme’s style.css:

.break-out .site-inner {
    max-width: none;
    padding-top: 0;
}

.break-out .content .entry {
    margin-bottom: 0;
    padding: 70px 0;
}

.break-out .content .entry-header {
    margin-bottom: 30px;
    text-align: center;
}

.break-out .content .entry-content {
    display: -ms-grid;
    display: grid;

    -ms-grid-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 800px) [main-end] minmax(1em, 1fr) [full-end];
    grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 800px) [main-end] minmax(1em, 1fr) [full-end];
}

.break-out .content .entry-content > * {
    grid-column: main;
}

.break-out .content .splash {
    margin-bottom: 40px;
    background-color: #ddd;

    grid-column: full;
}

.splash img {
    width: 100%;
    margin-bottom: 0;
    vertical-align: top;
}

Step 3

Create a Page having HTML in this format and apply the Break Out template to it.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis enim sit amet metus laoreet, ut condimentum metus dapibus. Phasellus sed gravida augue, eu finibus felis. Integer augue libero, aliquam lacinia nisl sed, sagittis fringilla nisl. Phasellus sapien mi, porttitor in metus sed, iaculis dignissim mauris.</p>

<div class="splash">
    <img src="https://local.test/wp-content/uploads/2018/02/SM2_MRBLE-PNY-flatlay.jpg" alt="" width="1600" height="350" class="alignnone size-full wp-image-639" />
</div>

<p>Vivamus fringilla orci dui, vitae aliquet tortor hendrerit eget. Nam nec dui accumsan, posuere ligula sed, dictum velit. Praesent in lorem ac libero lacinia luctus. Duis sed ante sit amet massa tempus dignissim. Mauris vitae finibus risus. In nec diam velit. Aenean pulvinar urna ut ligula elementum tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut libero tortor, lacinia eu pharetra at, bibendum vitae turpis. Aenean at bibendum dui. Curabitur sit amet tempus nisi, at molestie ligula. Aliquam tristique ligula a hendrerit luctus. Curabitur tristique quis erat et egestas.</p>

<div class="splash">
    <img src="https://local.test/wp-content/uploads/2018/02/SM2-MRBLE-PNY-laptop.jpg" alt="" width="1600" height="350" class="alignnone size-full wp-image-637" />
</div>

<p>Ut rutrum egestas lectus tempus pellentesque. Suspendisse vulputate risus at justo iaculis viverra. Integer ligula nisl, facilisis at justo vel, sodales lobortis nisl. Pellentesque eget tempor ex. Donec neque lacus, consequat eget fermentum at, sodales sit amet augue. Donec turpis ipsum, tincidunt et venenatis ac, hendrerit nec mauris. Sed tristique justo sed est finibus euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pulvinar ut justo sit amet vestibulum. Fusce quis risus ac ligula varius rhoncus vitae id nisi. Proin ullamcorper imperdiet gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam accumsan congue enim, eu fermentum nibh fringilla ut.</p>

Enclose any full-width content inside <div class="splash"> and </div>.

References:

https://codepen.io/tylersticka/pen/bWvaxP?editors=1100

https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/