There is a wealth of information out there talking about Genesis Grid Loop. When I started using Genesis, getting my head around the Genesis Grid Loop was a bit complicated to me. I went to our friendly neighborhood Google to try to look at as many code as possible to understand it. I can put together the code required based on different snippets. However, I don’t believe that I do have a decent grasp of the code.
This is where I said there must be an easier way to manage grids. So I went back to our friendly neighborhood Google to try to find other alternatives to Genesis Grid Loop and Wa La! I came across Flexbox.
What is Flexbox?
Flexbox is a shorthand for flexible boxes. In basic terms, it is boxes managed within a container in CSS3. It is just a piece of CSS code added to your stylesheet and viola! It handles your grid layout easily. Think of the container as a big box that contains smaller boxes. You have flexible control of the child boxes inside of the parent box.
Genesis Grid using Flexbox
You can easily incorporate Flexbox into Genesis by altering the code for your “.content” and “.entry” classes in your stylesheet. Flexbox requires a parent element that has to be set and then the child elements to be set as well to have full control of how the child elements display. In our case, in Genesis, we can use “.content” as the parent element and “.entry” as the child element.
|
1 2 3 4 5 6 7 8 9 |
.content { display: flex; flex-flow: row wrap; justify-content: space-between; } .entry { flex-basis: 32%; } |
The above code sets the parent to display all of its child items in a grid format. The parent is also set to displaying the child elements in rows which are wrapped. The wrap ensures that if the content hits the set width it wraps and goes to the next line. Lastly, we made the content to have equal spacing between them.
The child element is set to 32% width which will give the parent 4% (100% – (32% * 3)) to add the space between the items. When there are more than three child elements, it will move to the next line.
Use Flexbox Selectively
The above example will change all of your elements that use “.content” and “.entry” classes. That is being used in quite a bit of places in Genesis and some of its plugins. So it will break some of your layouts. I personally ensure that I use it where I need it by adding a custom body class to the pages/categories I will be using it at. I can then add it to that particular page.
Example of Flexbox in Genesis
Let us create a vanilla example of using flexbox along with Genesis. We will be adding the three most recent post into the top of a front page of your WordPress website.
Here is the final look we are going to achieve
1. Create the front page file
Create front-page.php file under your child theme folder and add the following code to it. The first part of the code adds a custom body class to the front page. Which we will be using to ensure our styling only applies to those elements in the front page.
The second part is a simple custom query to pull out the latest three posts and outputs them right before your loop. You can place the function whereever you see fit for your design.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<?php add_filter( 'body_class', 'io_front_page_body_class' ); /** * Adds a css class to the body element * * @param array $classes the current body classes * @return array $classes modified classes */ function io_front_page_body_class( $classes ) { $classes[] = 'front-page'; return $classes; } add_action( 'genesis_before_loop', 'io_front_page_latest_posts' ); function io_front_page_latest_posts() { // The Query $the_query = new WP_Query( array( 'order' => 'DESC', 'orderby' => 'date', 'no_found_rows' => true, 'posts_per_page' => 3 ) ); // The Loop if ( $the_query->have_posts() ) { echo '<div class="flexbox-container">'; while ( $the_query->have_posts() ) { $the_query->the_post(); echo '<div class="flexbox-item">'; if ( $image = genesis_get_image( 'format=url&size=featured-image' ) ) { printf( '<div class="featured-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) ); } echo '<h3><a href="'; echo esc_url( the_permalink() ); echo '">'; echo get_the_title(); echo '</a></h3>'; echo '</div>'; } echo '</div>'; /* Restore original Post Data */ wp_reset_postdata(); } else { // no posts found } } genesis(); |
2. Style it up
Add the following code to your style.css
The code below is the simplest form of flexbox. You can see in the code that we have created both the flexbox container and items below it to ensure it properly works. We have also added a bit of styling to the titles.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* # Front Page latest posts ---------------------------------------------------------------------------------------------------- */ .front-page .flexbox-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; } .front-page .flexbox-item { -ms-flex-preferred-size: 32%; flex-basis: 32%; background: #fff; } .flexbox-item h3 { padding: 0 5%; font-size: 18px; } |
Is that all there is to it?
If you just need a simple grid then yes. However, if you want to have more control on how different elements displayed within the child then you need to read more about flexbox. You also need to prefix your code to ensure that it does work across different browsers. You can use this online tool that automates it for you.
There is a complete guide in CSS-Tricks on Flexbox that is very handy. As well as a complete series of videos that was published by Wes Bos which I highly recommend which talks about it in details. There is also an online game that does fun to use to get started with flexbox. Enjoy the game!
Leave a Reply