Create a fullbleed grid layout with variable widths in Bricks

Create a fullbleed grid layout with variable widths in Bricks

Hey guys here’s a little tutorial from a learning experience from last month’s project.
Maybe it will help some of yous. Maybe you’ll find things to optimize it further.

My layout requirements are of course an example. You can build it like you wish. The possibilities of grid are endless.
For playing with grid layouts I highly recommend using https://cssgrid-generator.netlify.app/.

  1. My requirement was a flexible contentgrid with a max-width of 700px centered (you’re also able to use 72ch or the width of your choice). I want it easy and to be flexible if I want to add Componentes / grid columns or change a contentwidth.
  2. The main contentwidth should be optimized for readability (700px works fine also like values between 62 to 80ch).
  3. First breakout is for styleboxes around the 700px content
  4. Second width: sections like podcasts / disturber and more.
  5. Fullwidth – for some special sections.
  6. Aside – for additional functions like a toc.
  7. I wanted a minimum at classes.

The code

Among other things, I learned how to name grid areas, which will be very useful later.
You build the areas like an onion around the main content.

The minmax function defines the minimum width (outside 1em for some whitespace on mobile and 0 for anything else).

The “fr” means “fraction” what is the flexible unit of css grid. A fraction fills the available space without gaps and the numberprefix defines the ratio.
So a code like grid-template-columns: 1fr 1fr 1fr 1fr; results in four equal columns.
If you change the code to grid-template-columns: 1fr 0.5fr 0.5 1fr; it results in two equal wide columns and two equal columns with half of the width of the wide columns.

The grid. A digital frontier… oh oh wrong movie. My bad!

.contentgrid {
   display: grid;
   grid-template-columns: 
     [fullwidth-start] minmax(1em, 1fr)
      [wider-start]minmax(0, 0.5fr)
        [wide-start] minmax(0, 0.25fr)
         [main-start] minmax(0, 700px) [main-end]
        minmax(0, 0.25fr) [wide-end]
       minmax(0, 0.5fr) [wider-end]
      minmax(1em, 1fr) [fullwidth-end];
}

/* the * selector moves anything in the center column with 700px */
.contentgrid > * {
     grid-column: main;
}

.content--wide {
     grid-column: wide;
}

.content--wider {
     grid-column: wider;
}

.content--fullwidth {
     grid-column: fullwidth;
}

/* for placing sidebars or elements like a toc */
.content-aside--left {
     grid-column: 1 / 4;
}

You get a full content control with 4 classes (maybe more or less of you need more or less widths or an additional right column).

How to avoid to add every new page the .content class?

I’m a lazy person and I really hate redundant work. So I want to avoid to add every page the main class .contentgrid. We achieve that by adding following code to your functions.php or in the codeeditor of your choice (my personal choice is WPCodebox):

/*
 Add a class to the <main> tag
*/

add_filter( 'bricks/content/attributes', function( $attributes ) {
// Add 'data-is-header' HTML attribute to header with value 'y'
        $attributes['class'] = 'contentgrid';
        return $attributes;
     } 
);


This code adds the class .contentgrid to the normaly not accessible <main> Tag so every new content will automatically be centered and has a maxwidth of 700px.

Codepen

Here is a codepen to play around and experiment with.

https://codepen.io/defcon1702/pen/YzvpLOp

Is this grid useful for you? Do you have any ideas for improvement? Feel free to write it in the comments! ๐Ÿ™‚

  • Amanda Lucas

    Wondering if there is a way to apply the class to blog only posts as its a great layout for easy reading. Blogs would use Gutenberg.

    • Here the tested code:

      add_filter( ‘bricks/content/attributes’, function( $attributes ) {
      // Add ‘data-is-header’ HTML attribute to header with value ‘y’
      if ( is_singular(‘post’) ) {
      $attributes[‘class’] = ‘contentgrid’;
      }
      return $attributes;
      } );

    • Hey Amanda,

      yes that should be possible if you add a “if statement” with
      if ( is_singular( ‘post’ ).
      I will try to test a whole snippet later. ๐Ÿ™‚

Leave your comment