5 Columns Layout

I’d like to accomplish a 5 column horizontal layout, I read in the documentation that only 4 columns are available natively, can a 5th be added with CSS?

This website made a 5 column layout, but they are using CF7. I’m just thinking because GF is so much more advanced we should have no problem doing it.


There are CSS classes available that can be applied directly to the fields but you will lose the ability to drag and drop these fields in the editor (without losing your applied layout classes).

The above is achieved by adding gfield--width-one-sixth to each of the fields. Note the two dashses between gfield and width.

Hey David, thank you for the information.

I tried to implement the 5 wide layout using the code you provided. It was applied in the individual form fields appearance settings.

Screenshot 2023-01-01 163620

However the results it yielded for some reason don’t appear to be what was expected.

Any idea what I could be doing wrong?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Updating this topic with additional information. Be sure you add the class gfield--width-one-sixth with two dashes between gfield and width.

See also Five Columns inline? [RESOLVED]