The Stiz Media, LLC

Making your website work for you

  • Styles for Genesis
    • FAQs
  • Cart
  • My Account
  • Home
  • Web Design
  • Portfolio
  • Resources
  • Blog
  • Contact

Powerful websites, with style.

Home » Blog » Grid Column Generator

Grid Column Generator

December 15, 2015 Andhi 3 Comments

Concrete Columns

This is a handy, pixel based, percentage output, grid column generator. It works great when working with flexbox, Genesis post class columns, or any other scenario that you may want to define your container width, total columns, and gutter (space between the columns). It's a pretty useful tool that doesn't need much introduction. Major props to Marcy Diaz for schooling me on the math formula to get this working. Bookmark this post and use it as you need. Enjoy!

Column CountWidth
1⁄12 6.8055555555556%
2⁄12 15.277777777778%
3⁄12 23.75%
4⁄12 32.222222222222%
5⁄12 40.694444444444%
6⁄12 49.166666666667%
7⁄12 57.638888888889%
8⁄12 66.111111111111%
9⁄12 74.583333333333%
10⁄12 83.055555555556%
11⁄12 91.527777777778%
12⁄12 100%

Related Posts

  • Remove Avatar
    Remove Avatar from Genesis Author Box
  • Radio button toggles
    Radio buttons as toggle buttons with CSS
  • A really organized life
    Genesis Page Templates in a subdirectory

Tutorials

‹ Radio buttons as toggle buttons with CSS
Responsive background image aspect ratio with content overlay ›

Try The Most Powerful Genesis Child Theme Ever Created

Mai Theme is the most customizable Genesis child theme (and plugin!) available. Check it out now!

Learn More @ MaiTheme.com

Our posts, directly to your inbox

Comments

  1. Shaan Nicol says

    December 15, 2015 at 9:07 am

    Awesome, thanks Mike

    Reply
    • JiveDig says

      December 15, 2015 at 9:35 am

      No prob. Def a useful tool!

      Reply
  2. Jess says

    June 8, 2021 at 5:30 pm

    thank you for this awesome tool, still being used in 2021

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Our posts, directly to your inbox


Howdy, I'm Mike Hemberger. I like to build nice websites and web apps with WordPress and Genesis Framework.

I'm passionate about everything I do, and it resonates in all of my work.

Feel free to email, and you'll be speaking directly with me.

Recent Posts

Restful P2P Example

Create Posts 2 Posts ‘connections’ with the WordPress Rest API

EA Share Count SMS button

Add SMS share button to EA Share Count plugin

ACF Extras

ACF Extras officially launched! A community of code snippets and field groups

Remove Items from TinyMCE editor

Remove Buttons/Items From The WordPress TinyMCE Editor

  • My Account
  • Affiliate Area
  • Log In|Log Out
  • GitHub
  • Instagram
  • Twitter
  • YouTube

Copyright © 2025 · The Stiz Media, LLC · All Rights Reserved