The Problem
Many builders; think Divi, Elementor, Visual Composer may only allow for x maximum columns. What does one do when the need is for columns within columns?
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 lightweight 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.
DEMOS
5 Column Grid





Here is the simple grid code I’m using:
Thanks! I snagged your code and was able to successfully implement it. Shockingly, this is the first time I’ve found something I needed on the net and it worked right out of the box. I’m now a Grid Master!
This page is phenomenal, and I really mean it this time. I’m almost overwhelmed, but not quite, and expect more such unfathomable posts going forward. Do you have it in you? I love all the tech stuff you cover, and css grid one of the things that intrigues me. I mean, aren’t all page builders built upon this?