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! ????

Get access to all 524 Bricks code tutorials with BricksLabs Pro

5 comments

  • Jürgen

    Thanks for this article Sebastian, as a Bricks newbie I'm trying to grab as much info as I can, especially regarding a clever expansion.

    • Thank you! If you have any questions, always welcome! In my opinion, a big advantage of Bricks is that you can completely customize it to your needs!

  • 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

 

Related Tutorials..

Pro
Image Banner as Query Loop Posts Grid’s Last Item in Bricks

Image Banner as Query Loop Posts Grid’s Last Item in Bricks

In the comments section of How to Insert Element(s) Between Query Loop Posts in Bricks tutorial, a site member asked: This is fantastic! Is there…
Categories:
Tags:
Pro
Custom Posts Grid Layout in Bricks using CSS Grid

Custom Posts Grid Layout in Bricks using CSS Grid

There are at least three ways in which we can build custom loops in Bricks. Posts elementTurning on Query Loop on a containerCode element While…
Categories:
Auto Responsive Grids in Bricks

Auto Responsive Grids in Bricks

This tutorial provides the CSS that can be pasted for automatic responsive grids in Bricks Builder. Posts element Each post will get a right padding…
How to display a Query Loop in 3 columns in Bricks

How to display a Query Loop in 3 columns in Bricks

This tutorial provides the builder settings and CSS codes that can be pasted in order to create a 3-columns query loop container inside Bricks Builder.
Categories:
Pro
CSS Grid for Posts Element in Bricks

CSS Grid for Posts Element in Bricks

The "Posts" element in Bricks has "Grid" as the default layout but the actual CSS it applies on the page feels hacky with negative margins…
Categories:
How to create a dynamic infinite logo slider with ACF and Bricks

How to create a dynamic infinite logo slider with ACF and Bricks

This tutorial provides the builder settings, PHP & CSS codes that can be pasted in order to create an infinite logo slider in pure CSS…