Gravity Forms: 4 Column CSS

style.css

/* 4 column Gravity Forms custom ready class ------------------------------------------------------*/

.gform_wrapper .top_label li.gfield.gf_first_quarter,
.gform_wrapper .top_label li.gfield.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gf_third_quarter,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter {
	margin:0 0 8px 0;
	width:24%;
}

.gform_wrapper .top_label li.gfield.gfield_error.gf_first_quarter,
.gform_wrapper .top_label li.gfield.gfield_error.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gfield_error.gf_third_quarter {
	width:21%;
}

.gform_wrapper .top_label li.gfield.gfield_error.gf_third_quarter {
	margin-right:1%;
}

.gform_wrapper .top_label li.gfield.gf_first_quarter {
	float:left;
	clear:left!important;
}

.gform_wrapper .top_label li.gfield.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gf_third_quarter,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter {
	float:left;
	margin-left:2%;
	clear:none!important;
}

.gform_wrapper .top_label li.gfield.gfield_error.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gfield_error.gf_third_quarter {
	margin-left:3%;
}

.gform_wrapper .top_label li.gfield.gf_first_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_first_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_first_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_first_quarter select.large,
.gform_wrapper .top_label li.gfield.gf_second_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_second_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_second_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_second_quarter select.large,
.gform_wrapper .top_label li.gfield.gf_third_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_third_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_third_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_third_quarter select.large,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter select.large {
	width:95%;
}

.gform_wrapper .top_label li.gfield.gf_first_quarter+li.gsection,
.gform_wrapper .top_label li.gfield.gf_third_quarter+li.gsection {
	padding:16px 0 8px 0;
}

.gform_wrapper .top_label li.gfield.gf_first_quarter+li.gfield,
.gform_wrapper .top_label li.gfield.gf_second_quarter+li.gfield,
.gform_wrapper .top_label li.gfield.gf_third_quarter+li.gfield,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter+li.gfield {
	clear:both;
}

.gform_wrapper .top_label li.gfield.gf_first_quarter+.gform_footer,
.gform_wrapper .top_label li.gfield.gf_second_quarter+.gform_footer,
.gform_wrapper .top_label li.gfield.gf_third_quarter+.gform_footer,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter+.gform_footer {
	clear:both;
}

Things don't line up quite right when you have 4 columns and you want a field underneath that stretches the width of the form. (Maybe just my theme?) I added a gf_full_width class and things seem to work OK for now.

.gform_wrapper .top_label li.gfield.gf_full_width input.medium,
.gform_wrapper .top_label li.gfield.gf_full_width input.large,
.gform_wrapper .top_label li.gfield.gf_full_width select.medium,
.gform_wrapper .top_label li.gfield.gf_full_width select.large{
    width:95%;
}

how would one convert this to an 8 column layout? Is that possible?