CSS Grid Support in GeneratePress

Hi there,

GeneratePress 3.0 is about to be released soon.
Default installs of 3.0 will remove the legacy unsenantic grid and replace it with CSS Flexbox.

Flexbox for the themes layout is far simpler to setup within the Customizer ie. no additional controls to maintain legacy behaviour. It also have more stable support across all browsers.

Whereas CSS Grid is more 'complex' and would require an additional control scheme. Also Grid Gap is not fully supported on all legacy browsers.

Of course with the new flex version - replacing it with CSS Grid will also be far simpler as there are no utility classes in the HTML ( which unsemantic required ).

Oh neat. =)

Thanks for the reply. Is there a place to preview or test out the upcoming version?

Not yet - working out the last details before we release alpha testing :)

Any update on when CSS grid is going to be implemented within generatepress blocks?

Hi there,

we don't have any firm plans on adding CSS Grid to GenerateBlocks ( or the theme ).
It is something we are experimenting with, but the major hurdle is creating a UI that not only works but is actually understandable.

There are a couple of tools out there that assist with the CSS generation of a CSS Grid.
This is one i like:

https://grid.layoutit.com

And implementing that into a GB Container block is quite simple.
Happy to assist with any CSS if you want to try.

I'm ok with writing vanilla grid css so what would your recommendations be about applying it to say a block layout with Generatepress. Will the css show within the UI or just simply show on the frontend?

You can load the CSS in the editor as well.

If the CSS is in the Customizer > Additional CSS then add this PHP Snippet:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

If you have the CSS saved in a child theme stylesheet then use this PHP Snippet:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'your-editor-style.css';

    return $editor_styles;
} );

Change the your-editor-style.css to the name of the stylesheet.

I would probably, use a Container Block for the parent Grid, and stack a load of Containers within for the grid items.
You could use a grid block, but that will load unnecessary Flex styles that may get in your way.