Divi sections only allow for a maximum of four columns. What does one do when the need is for five, six, seven or more?
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.
5 Column Grid
7 Column Grid
10 Column Grid
3-12 / 9-12 Layout
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.
10-12 / 2-12 Layout
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
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.