Grid System

Allow users to resize the layouts and re-order layouts on a grid system. This new logic is based on the Bootstrap 4 grid, allowing many new settings to customize the Flexible Content behavior.

Click the "Add Row" button below to start creating your layout
0 Column
1 Column
Gallery
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula.
2 Column
Hero
Lorem ipsum dolor sit amet.
3 Column
4 Column
Newsletter
5 Column
Builder

Grid Settings

Setting nameDescription
AlignDefine the grid alignment: Left, Center, Right, Space evenly, Space between or Space around
Vertical AlignDefine the vertical alignment of columns: Stretch, Top, Center or Bottom
WrapWrap columns into one single line
ContainerApply a maximum grid width

Layouts Grid Settings

Setting nameDescription
Default ColumnDefine the default column size when the layout is being added: Auto, 1/12, 2/12, 3/12, 4/12, 5/12, 6/12, 7/12, 8/12, 9/12, 10/12, 11/12, 12/12
Allowed ColumnsDefine the allowed columns the user can choose

Front-End Render

in order to retrieve the Flexible Content Grid settings on the front-end, new dedicated helpers can be used: has_flexible_grid() get_flexible_grid() get_flexible_grid_class(). Usage example:

<?php if(has_flexible('flexible_content')): ?>

    <div class="row <?php echo get_flexible_grid_class('flexible_content'); ?>">
        <?php the_flexible('flexible_content'); ?>
    </div>

<?php endif; ?>

The get_flexible_grid_class() function will generate CSS class based on the Flexible Content settings. In this case it will generate:

align-center valign-stretch wrap

Please note that no actual CSS style is being added by ACF Extended on the front-end. Developers have to add their own style manually, depending on their need.

You can also retrieve the Grid settings using get_flexible_grid('flexible_content') which will generate an array of settings.

In order to retrieve the column size of each layouts, developers now have access to a new variable $col when using the Dynamic Render setting. It is also possible to retrieve the user column size using get_layout_col() or get_sub_field('acfe_layout_col').

Developers can then add the column size in the layout render. Usage example:

<?php

/*
 * Hero Layout Render Template.
 *
 * @array   $layout      Layout settings (without values)
 * @array   $field       Flexible content field settings
 * @bool    $is_preview  True in Administration
 * @string  $col         Column size (auto, 1, 2, 3, 4 ...)
 */
 
?>

<div class="layout-hero col-<?php echo $col; ?>">

    <h1>Hero</h1>
    
    <h3><?php the_sub_field('text'); ?></h3>
    
</div>

Front-End CSS Style

Here is an example of the CSS style that can be added on the front-end in order to apply the correct flexbox property and columns width:

.row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
​
.wrap{
	flex-wrap: wrap;
}
​
.col-12{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}
​
.col-11{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%
}
​
.col-10{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%
}
​
.col-9{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%
}
​
.col-8{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%
}
​
.col-7{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%
}
​
.col-6{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
}
​
.col-5{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%
}
​
.col-4{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%
}
​
.col-3{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%
}
​
.col-2{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%
}
​
.col-1{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%
}
​
.col-auto{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
​
.align-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}
​
.align-left{
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}
​
.align-right{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}
​
.align-space-evenly{
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}
​
.align-space-between{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}
​
.align-space-around{
    -ms-flex-pack: distribute;
    justify-content: space-around
}
​
.valign-stretch{
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}
​
.valign-top{
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}
​
.valign-center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
​
.valign-bottom{
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}