Create a grid layout with Flexbox in the WordPress theme

In this tutorial I show how you can create a grid layout with Flexbox in WordPress. Grid layouts are particularly suitable for displaying content blocks on an overview page, for example an archive page with articles, a portfolio with references, or a product category of an online shop.

Example of a grid layout with flexbox: Grid layout with flexbox

Flexbox browser support

Flexbox is a CSS3 feature that is now fully supported by all new browsers . Internet Explorer supports Flexbox from version 11, although bugs often appear here. Even with Safari, I occasionally found minor bugs in practice, but these can be fixed.

WordPress.com dropped support for IE 9 & 10 in January, which I think is a good default. So as long as these ancient browsers no longer need to be supported, Flexbox can, in my opinion, be used fully productively. In the meantime I also use Flexbox in all of my new themes in one place or another.

Flexbox browser support
Flexbox browser support

Replacement of float layouts

Multi-column grids have been implemented with float layouts for years. However, these were not actually intended for the display of grid layouts and therefore have some disadvantages. Among other things, a lack of vertical centering, grid elements not having the same height and cumbersome clearing of the floats.

Therefore, two new features have been created especially for the implementation of layouts:

  1. Flexbox - for one-dimensional grids (only one row or one column)
  2. Grid layouts - for two-dimensional grids with rows and columns

Both standards are implemented with a new value for the display property. For a flexbox container we use display: flex , for a grid container display: grid .

In contrast to Flexbox, grid layouts are still in their infancy and are currently not supported by any current browser (except in experimental mode). That is why there is currently only the option of using Flexbox. And even if Flexbox is actually intended for one-dimensional grids, it can also be used to create multi-line grids. And these are still better than floats.

Create a grid layout with Flexbox

For a gridbox layout with flexbox, we need a container in the HTML code that has several child elements. First of all there is nothing different from grid layouts with floats, except that any previously existing Clearfix classes are no longer required.

 <div class="post-wrapper">   <div class="post-column">   <div class="post-column">   <div class="post-column"> </div>

There are bigger differences in the CSS code. While with float layouts the child elements are typically provided with float: left , with Flexbox the parent container is set with display: flex as a flex container instead. All child elements are therefore automatically flex items.

 .post-wrapper {   display: flex;   flex-wrap: wrap;   margin-right: -2em; }

We remember that Flexbox is intended for one-dimensional grids. Therefore Flexbox shows all child elements in just one line with the default values. This is of course undesirable for a normal grid layout with rows and columns. We can remedy this with flex-wrap: wrap, which moves flex elements to the next line if there is not enough space. So the grid layout behaves very similar to floats again.

This alone does not create a grid because all flex elements still have a full width of 100% and therefore our grid only has one column. Therefore we define a smaller width for the child elements depending on the desired number of columns. We use padding to create a gap between the grid elements. Together with box-sizing , this ensures that each element retains the desired width.

 .post-wrapper .post-column {   width: 25%;   box-sizing: border-box;   padding-right: 2em; }

Each element in the grid has a distance of 2 em to the right. In order to fill the full width of the content area, we have already defined a negative space of -2em to the right in the parent container.

Implementation in the WordPress theme

For an implementation in a WordPress theme, the shown CSS code can be transferred directly to the style.css . The HTML code, however, must be integrated into the WordPress loop.

As an example, the following code snippets show an integration in the archive.php , with which a grid layout can be implemented for contributions on archive pages such as categories or tags.

We define the .post-wrapper container outside of the WordPress loop. The archive.php loads the content.php in the / template-parts folder to display the individual contributions. In this, every article is included with the .post-column DIV.

Conclusion

We have created a very simple grid layout with Flexbox without going into the topic. Flexbox has numerous properties for manipulating the layout. If you would like to take a closer look at Flexbox, I recommend the Flexobx Guide from CSS Tricks for an overview of all the possibilities.

What are you already using Flexbox for? For examples, suggestions and feedback, I am very happy to receive a comment!