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?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

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:

Shortcode

[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]

CSS

 

/* 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