Hey everyone, I've been using GF for a while now and love the product. I recently had a need for a 4 column layout and created new css ready classes to create this layout. There are already a few posts from people wanting 4 column support but I didn't see any solutions on the forums that I liked. So I figured I would share my solution here....
Add the following to your theme's CSS file (to avoid plugin update overrides).
/* 4 column ready class ------------------------------------------------------*/
.gform_wrapper .top_label li.gfield.gf_one_quarter { float:left; margin-right: 4%; width: 22%; clear:right !important; }
.gform_wrapper .top_label li.gfield.gf_quarter_last { margin-right:0; }
.gform_wrapper .top_label li.gfield.gfield_error.gf_one_quarter { width: 18% }
.gform_wrapper .top_label li.gfield.gf_one_quarter input.medium, .gform_wrapper .top_label li.gfield.gf_one_quarter input.large, .gform_wrapper .top_label li.gfield.gf_one_quarter select.medium, .gform_wrapper .top_label li.gfield.gf_one_quarter select.large { width: 95% }
.gform_wrapper .top_label li.gfield.gf_one_quarter+li.gsection, .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gsection { padding: 16px 0 8px 0 }
.gform_wrapper .top_label li.gfield.gf_one_quarter+li.gfield, .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gfield, .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gfield, .gform_wrapper .top_label li.gfield.gf_one_quarter+.gform_footer, .gform_wrapper .top_label li.gfield.gf_one_quarter+.gform_footer, .gform_wrapper .top_label li.gfield.gf_one_quarter+.gform_footer { clear: both }Then add gf_one_quarter to your fields css class name for each of the 4 columns. For the last column, enter gf_one_quarter and gf_quarter_last
I wanted the 4 column layout to display well no matter how wide the form was displayed, so I used only % widths for the columns and the padding. I also wanted to take up as few lines of code as possible (my 4 column is 6 lines vs. GF 2 columns being 13) - so I approached the issue of the individual columns a little differently. Instead of naming each column separately (ie gf_left_third, gf_middle_third, gf_right_third) I simply name each 1/4 column "gf_one_quarter". The difference is when you add the css class for the last column, you must enter "gf_one_quarter gf_quarter_last". The "gf_quarter_last" removes the unnecessary right margin from the last column.
I haven't tested the above code in all scenarios (and I'm definitely no css expert) but it works well for my form. If you use this, let me know if you find any display issues and I'll see if I can help refine the code.
