[Resolved] CSS Grid Support in GeneratePress

Home Forums Support [Resolved] CSS Grid Support in GeneratePress

Home Forums Support CSS Grid Support in GeneratePress

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1415278
    Alex

    Hi there,
    I’m new to this framework. I think it’s a great framework that you’ve built. I’d like to use CSS Grid for laying out pages and such. I know I can override layout elements with my own. But I wanted to know if there are any plans to update the theme to use CSS Grid? And are you accepting PRs for this?

    #1415289
    David
    Staff
    Customer Support

    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 ).

    #1421149
    Alex

    Oh neat. =)

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

    #1421163
    Leo
    Staff
    Customer Support

    Not yet – working out the last details before we release alpha testing 🙂

    #2324364
    Jonathan

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

    #2324424
    David
    Staff
    Customer Support

    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.

    #2326945
    Jonathan

    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?

    #2327093
    David
    Staff
    Customer Support

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.