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.

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