Divi ♥ Licious Simple Grid Plugin

October 2, 2015

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

Developer

Demos

5 Column Grid

Great Ideas
Timely
Location
Picture Spot
Stay Informed

7 Column Grid

Stay Informed
Stay Informed
Stay Informed
Stay Informed
Stay Informed
Stay Informed
Stay Informed

10 Column Grid

HBO Tonight Woke up, fell out of bed…
HBO Tonight How now brown cow?
HBO Tonight Little Miss Muffet, sat on a tuffet…
HBO Tonight One smart fellow, he felt smart…
HBO Tonight A stitch in time saves how many?
HBO Tonight It’s a wonderful life.
HBO Tonight Favorite Actor: Clint Eastwood
HBO Tonight Favorite Producer: Clint Eastwood
HBO Tonight Once upon a midnight dreary…
HBO Tonight 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

Hipster
Girl Big Hat in Blue
Headphones Guy
Necklace Woman
Curly Red Man

1949 Oldmobile Wagon
Best-Art-Volkswagen-Bus-Car-Wallpaper
chevrolet-corvette-c1-07
Classic 40's With Waterfall Grill
Ford Classic Edsel - Named after Henry Ford's Son

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 »;
Favorite Color
RedBlueGreen
Favorite Number
OneTwoThree
Favorite Weather
HotWarmCool>
Your Message

Fly Me

Sign Me Up


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

Get Yours
mailbox email subscribe

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.

 

Tip Jar

Send a Gratuity

Your generosity is greatly appreciated 🙂


Credit Cards


Loading...

Give a Shout Out

11 + 13 =

Pin It on Pinterest

Signup For Access To Free WordPress Tips & Resources

Signup For Access To Free WordPress Tips & Resources

Signup for our very occasional newsletter and get access to free downloads, as well as WordPress tips, tricks and resources.

You have Successfully Subscribed!