Grid Row

Overview

Grid element is very useful to build interesting box layout designs. A grid is a full-width element and lets you add any number of rows below each other. A Grid row consists of a minimum one and up to 5 cells that are aligned beside each other. Each cell can have a independent background color or image. Grid cells can accommodate a block of text, buttons, image, video, or other content elements.



Another Grid layout example

How to use grid element?

  • Drag and drop the grid element.
  • Add the number of cells required.
  • Click on “Set cell size” and the theme will auto-generate the combination of grid cells.
  • Select the grid cell combination that suits your purpose well.
  • Add your content in the grid cell.

Cell Animation

Grid cells can fade in or be revealed by a curtain wipe when the visitor first scrolls to them, the same animations columns already offer.

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

A Grid element can produce grid cells in a large number of combination hence it is best to enable debug mode and view the shortcode for the grid element.

[av_layout_row border='' min_height_percent='' min_height='0' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' mobile_breaking='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-3do328']
[av_cell_one_half av_uid='av-395u0g'][/av_cell_one_half] [av_cell_one_half av_uid='av-33mufk'][/av_cell_one_half]
[/av_layout_row]

Customization

Grid row width

By default, a “Grid row” is a fullwidth element. If your design demands a grid layout which is not full-width. The width of the grid can be modified using custom ID and CSS code.

  • Let’s start by adding a custom ID to the grid and call it “av-grid-custom-width”. To make it easy we have provided the necessary shortcode for the grid row which you can copy to your page/post and save.
  • Add the below CSS in Enfold > General Styling > Quick CSS or in your child theme styles.

Example of custom width grid row element.

Code snippets:

[av_layout_row border='' min_height_percent='' min_height='0' color='main_color' mobile='av-flex-cells' id='av-grid-custom-width' av_element_hidden_in_editor='0' mobile_breaking='' av_uid='av-1u5ru4']
[av_cell_one_half vertical_align='top' padding='30px' padding_sync='true' background='bg_color' background_color='#83a846' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' av_uid='av-jhx48nf9']

[av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='20vh' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-jhx49xz4' admin_preview_bg='']

[av_heading tag='h3' padding='10' heading='Grid Row 1' color='' style='blockquote modern-quote modern-centered' custom_font='' size='' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' margin='' av_uid='av-3ilhgc'][/av_heading]

[av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='20vh' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-jhx49xz4-3' admin_preview_bg='']

[/av_cell_one_half][av_cell_one_half vertical_align='top' padding='30px' padding_sync='true' background='bg_color' background_color='#7bb0e7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' av_uid='av-jhx48uue']

[av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='20vh' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-jhx49xz4-2' admin_preview_bg='']

[av_heading tag='h3' padding='10' heading='Grid Row 2' color='' style='blockquote modern-quote modern-centered' custom_font='' size='' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' margin='' av_uid='av-2f0svg'][/av_heading]

[av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='20vh' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-jhx49xz4-1' admin_preview_bg='']

[/av_cell_one_half]
[/av_layout_row]
 

/* Custom grid row width*/

#av-grid-custom-width {
    max-width: 1310px;
    margin: 0 auto;
}

Clickable Grid cells

Sometimes you may need to link a grid cell and make it clickable, to do so:

  • First, enable custom CSS class name support.
  • Give a custom CSS class name “grid-clickable” to the grid cell.
  • Add your text content with a link.
  • Add the below script in child theme functions.php
/*----------------------------------------
// Js 
// Clickable grid cells
//--------------------------------------*/
function avia_grid_clickable(){
?>
 <script>
jQuery(window).on('load', function(){
jQuery(".grid-clickable").click(function() {
  window.location = jQuery(this).find("a").attr("href"); 
  return false;
});
});
 </script>
<?php
}
add_action('wp_footer', 'avia_grid_clickable');
  • Add the CSS below in Enfold > General Styling > Quick CSS or in your child theme styles.
/*----------------------------------------
// Grid Clickable CSS
//--------------------------------------*/

.grid-clickable {
cursor: pointer;
}

Gap between grid cells

To add gaps between the grid cells as shown in the below picture.

Add the CSS snippet in Enfold > General Styling > Quick CSS or in your child theme styles.

/*----------------------------------------
// Grid cell gap
//--------------------------------------*/

#top .flex_cell {
    border-width: 24px!important;
    border-right-width: 0px!important;
    border-bottom-width: 0px!important;
    border-style: solid!important;
    border-color:#FFF!important;
}

#top .flex_cell:last-child {
    border-right-width: 24px!important;
}

Resource

Contributed video

The Grid Row Tutorial

Grid row on mobile

Where: Layout Builder > Grid Row > Advanced > Responsive

Mobile Behaviour decides whether the cells stack on small screens (default) or stay side by side as on large screens.

Fullwidth Break Point sets when the cells switch to full width: on mobile (767px and below) or already on tablets (989px and below).

Column Behaviour When Fullwidth sets the order of the stacked cells:

  • Same order as on desktop: cells keep their order.
  • Reverse order: the last cell comes first.
  • Set the position of each cell: open each cell, go to Advanced > Responsive and choose its position there.