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