Display posts in a responsive dynamic grid

Here is the code to display your posts in a responsive dynamic grid (often called pinboard or masonry grid).

// Enqueue the UIkit dynamic grid component.
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_grid_uikit_assets' );

function example_enqueue_grid_uikit_assets() {

  // Only apply to non singular view.
 if ( !is_singular() ) {
   beans_uikit_enqueue_components( array( 'grid' ), 'add-ons' );
 }

}


// Display posts in a responsive dynamic grid.
add_action( 'wp', 'example_posts_grid' );

function example_posts_grid() {

  // Only apply to non singular view.
 if ( !is_singular() ) {

   // Add grid.
    beans_wrap_inner_markup( 'beans_content', 'beans_child_posts_grid', 'div', array(
     'data-uk-grid' => '{gutter: 20}'
    ) );
    beans_wrap_markup( 'beans_post', 'beans_child_post_grid_column', 'div', array(
      'class' => 'uk-width-large-1-3 uk-width-medium-1-2'
   ) );

    // Move the posts pagination after the new grid markup.
   beans_modify_action_hook( 'beans_posts_pagination', 'beans_child_posts_grid_after_markup' );
  
  }

}

Note how we only include the UIkit grid add-ons CSS and JS only for this specific usage to make sure the other pages remain light and zippy. For more information about the dynamic grid, read the UIkit grid documentation.