The Problem
Divi sections only allow for a maximum of four columns. What does one do when the need is for five, six, seven or more?
The Solution
Simple Grid to the Rescue
A basic responsive grid for winners. This project is based on Chris Coyier’s post on grids http://css-tricks.com/dont-overthink-it-grids/. Simple Grid is a basic lightweight grid, not a CSS framework. There are no styles for buttons, tables, typography etc. etc. Responsive – Built with responsive sites in mind, Simple Grid allows developers to build websites on a foundation suited for mobile and tablet browsers.
- Lightweight – Simple Grid is simply that, a grid. This is not a framework with everything from forms to buttons styled but a lightwight simple CSS grid.
- 1140px- No longer do we develop for 1024px monitors. Simple Grid is designed to make sites look great on larger monitors with higher resolutions.
- 12 Columns- The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving developers numerous layout possibilities.
Simple Grid was created for developers who need a bare bones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.
Divi ♥ Licious Simple Grid Text View
Text Editor View
Divi ♥ Licious Simple Grid Control
Toolbar Control Icon
Divi ♥ Licious Simple Grid Visual View
Visual Editor View
Six Items in One Row
6 Column Grid
Demos
5 Column Grid
7 Column Grid
10 Column Grid
Woke up, fell out of bed… How now brown cow? Little Miss Muffet, sat on a tuffet… One smart fellow, he felt smart… A stitch in time saves how many? It’s a wonderful life. Favorite Actor: Clint Eastwood Favorite Producer: Clint Eastwood Once upon a midnight dreary… while I pondered weak and weary.Layout Demos
3-12 / 9-12 Layout
Column 1 Curabitur vestibulum aliquam leo. Fusce fermentum odio nec arcu. Vivamus aliquet elit ac nisl. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Sed in libero ut nibh placerat accumsan.
Column 2 Etiam rhoncus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Quisque rutrum. Praesent congue erat at massa. Nam at tortor in tellus interdum sagittis.Sed aliquam ultrices mauris. Nullam cursus lacinia erat. Ut tincidunt tincidunt erat. Phasellus blandit leo ut odio. Sed in libero ut nibh placerat accumsan.Nunc nulla. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Aenean vulputate eleifend tellus. Etiam imperdiet imperdiet orci. Fusce ac felis sit amet ligula pharetra condimentum.Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Etiam vitae tortor. Suspendisse non nisl sit amet velit hendrerit rutrum.In turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Nulla sit amet est. Quisque id odio. Praesent nec nisl a purus blandit viverra.
4-12 / 6-12 Layout
Columns total 10 in this example, so will not be full width. Example below (2-12 / 10-12) 2+10=12, so will be full width.
Column 1 Curabitur vestibulum aliquam leo. Fusce fermentum odio nec arcu. Vivamus aliquet elit ac nisl. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Sed in libero ut nibh placerat accumsan.Praesent congue erat at massa. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent congue erat at massa. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Morbi ac felis.Praesent turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc interdum lacus sit amet orci. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Etiam rhoncus.
Column 2 Etiam rhoncus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Quisque rutrum. Praesent congue erat at massa. Nam at tortor in tellus interdum sagittis.Sed aliquam ultrices mauris. Nullam cursus lacinia erat. Ut tincidunt tincidunt erat. Phasellus blandit leo ut odio. Sed in libero ut nibh placerat accumsan.Nunc nulla. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Aenean vulputate eleifend tellus. Etiam imperdiet imperdiet orci. Fusce ac felis sit amet ligula pharetra condimentum.Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Etiam vitae tortor. Suspendisse non nisl sit amet velit hendrerit rutrum.In turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Nulla sit amet est. Quisque id odio. Praesent nec nisl a purus blandit viverra.
10-12 / 2-12 Layout
Column 1 Curabitur vestibulum aliquam leo. Fusce fermentum odio nec arcu. Vivamus aliquet elit ac nisl. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Sed in libero ut nibh placerat accumsan.Sed aliquam ultrices mauris. Nullam cursus lacinia erat. Ut tincidunt tincidunt erat. Phasellus blandit leo ut odio. Sed in libero ut nibh placerat accumsan.Nunc nulla. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Aenean vulputate eleifend tellus. Etiam imperdiet imperdiet orci. Fusce ac felis sit amet ligula pharetra condimentum.Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Etiam vitae tortor. Suspendisse non nisl sit amet velit hendrerit rutrum.In turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Nulla sit amet est. Quisque id odio. Praesent nec nisl a purus blandit viverra.
Column 2 Etiam rhoncus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Quisque rutrum. Praesent congue erat at massa. Nam at tortor in tellus interdum sagittis.
Five Column Grid of Avatars, Cars & Trucks
Two Five Column Rows Stacked
In this five column grid example I’ve inserted images linked to their larger version and added the class “et_pb_lightbox_image”. File this handy snippet away as it makes use of Divi’s built in lightbox capability. Why isn’t this added to the inserted links automatically when one chooses to link to the media instead of the attachment page or other url?!
Contact Form 7 Formatting with Simple Grid
In this example I’ve used the text editor in a text module to generate my gird code. The code was then copied and pasted into Contact Form 7 and form fields subsequently added. I am also using my home rolled Style Contact Form 7 Like Divi css, which has been added to the child theme’s style.css. Note how tidy those checkboxes are. Try to do that out of the box with CF7 and any theme. You can grab the script here »;
Airline Style
I found a form similar to this on an airlines reservation website. Using Contact Form 7, Simple Grid and Divi I created this fun & tidy form. All Simple Grid CSS is contained in the Contact Form 7 form itself.
Usage Demo
Grab the Divi ♥ Licious Simple Grid Plugin for WordPress
Subscribe for Divi Freebies
Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.
[mailpoet_form id="1"]