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;
}

This works perfectly. Thanks for sharing!! The only thing I noticed is that the fields don't expand on single lines on a mobile device like the other gravity form fields do. This makes it a little complicated to fill out since it fits all 4 fields next to each other on one line. I figured out how to fix that problem, though:

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px){
    .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 0 0 !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    }
}

Thanks for the awesome time saving code 👍

Love you guys.

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?