# Making 3 or 4 column layout for Knack Form **URL:** \ **Category:** Show & Tell\ **Created:** [March 16, 2015, 11:58am UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302 "2015-03-16T11:58:40Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\ **Post date:** [March 16, 2015, 11:58am UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/1 "2015-03-16T11:58:40Z")
Hi, Knack form support only 2 column layout for the form. We can have more columns using CSS. Thanks to Nic (Knack Team) for suggesting the workout. In form, I have one group with 2 column layout. Next, I added another group with 1 column layout, which CSS will transform into (2+1) column layout. And CSS tranform it into 3rd column. If 2nd group had 2 column layout, CSS would make it 4 column layout. Following is the CSS code that I used to achieve 3( or 4) column layout for the form. Add this CSS under API & Code\>CSS ------------------------- ul.kn-form-group{float:left}  ul.kn-form-group.clearfix:nth-child(3){clear:both} ul.kn-form-group.clearfix:nth-child(2){margin-left: 25px;} div.kn-submit{clear:both} -------------------- ---
**Author:** ![ChiefVande97344](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/chiefvande97344/32/676_2.png) [@ChiefVande97344](https://forums.knack.com/u/ChiefVande97344)\ **Post date:** [April 22, 2020, 8:16am UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/2 "2020-04-22T08:16:46Z")
How do you add more columns with the details section? I was able to use this method for my form. But I would like to do the same thing when I am showing the detail of the filled out form. ---
**Author:** ![LeighBerre96926](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/leighberre96926/32/4896_2.png) [@LeighBerre96926](https://forums.knack.com/u/LeighBerre96926)\ **Post date:** [June 21, 2019, 5:55am UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/3 "2019-06-21T05:55:36Z")
And just another update.  One of the problems with this approach is that there is a 'known issue" (i.e. a bug) in Knack that two column groups render wrong on mobile devices - the columns stack vertically but only occupy half the screen.  One day they will fix this, but in the meantime it means this idea suffers from the same bug - when you build two groups of 2 columns to get a 4 column screen, they render half width on a mobile device. My workaround is to build a stack of 4 (or 5 or 6) 1 column wide groups, and let the CSS spread them horizontally when displayed on a large screen, and use Brad Steven's trick to drop it back to stacked single columns on a mobile device.  This is working great. My CSS is below.  Hope its of use to someone. /\*this puts a thin grey border around each of the 4 columns, looks better in my opinion\*/ #view\_544 \> form \> ul:nth-child(1) \> li { border: solid 1px lightgrey ; border-radius: 0px; margin: 10px; padding:20px; min-width: 30% } #view\_544 \> form \> ul:nth-child(2) \> li { border: solid 1px lightgrey ; border-radius: 0px; margin: 10px; padding:20px; min-width: 30% } #view\_544 \> form \> ul:nth-child(3) \> li { border: solid 1px lightgrey ; border-radius: 0px; margin: 10px; padding:20px; min-width: 30% } #view\_544 \> form \> ul:nth-child(4) \> li { border: solid 1px lightgrey ; border-radius: 0px; margin: 10px; padding:20px; min-width: 30% } /\*this spreads the 4 groups across the screen, unless the screen is less than 1200pc axross and then it defaults to stacking them vertically\*/ @media screen and (min-width: 1199px) { /\*this sits the 4 groups side by side, sets a fixed heigt of 750px, and sets up the passing and seperation between the groups\*/ #view\_544 ul.kn-form-group{float:left; margin-left: 5px; height:750px} #view\_544 ul.kn-form-group.clearfix:nth-child(3){clear:both} #view\_544 ul.kn-form-group.clearfix:nth-child(2){margin-left: 20px;} #view\_544 div.kn-submit{clear:both} }   ---
**Author:** ![LeighBerre96926](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/leighberre96926/32/4896_2.png) [@LeighBerre96926](https://forums.knack.com/u/LeighBerre96926)\ **Post date:** [June 21, 2019, 2:42am UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/4 "2019-06-21T02:42:11Z")
Very late to the party, but thanks for this post - once I got my head around it I found it really very useful, including all the bits that everyone chipped in.  Great example of collaboration! ---
**Author:** ![CodyPrice59629](https://avatars.discourse-cdn.com/v4/letter/c/3da27b/32.png) [@CodyPrice59629](https://forums.knack.com/u/CodyPrice59629)\ **Post date:** [August 22, 2017, 6:12pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/5 "2017-08-22T18:12:26Z")
Thank you Raju!  I'm going to test it out now, I appreciate your help!   ---
**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\ **Post date:** [August 22, 2017, 5:55am UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/6 "2017-08-22T05:55:25Z")
eg. following example for View\_4 in my app. Simiarly you can target for Scene. Replace View\_4 with Scene\_ID ------------------------- #view\_4 ul.kn-form-group{float:left}  #view\_4 ul.kn-form-group.clearfix:nth-child(3){clear:both} #view\_4 ul.kn-form-group.clearfix:nth-child(2){margin-left: 25px;} #view\_4 div.kn-submit{clear:both} -------------------- ---
**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\ **Post date:** [August 22, 2017, 5:52am UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/7 "2017-08-22T05:52:47Z")
Yes, you can. You have to find id of group and use that id in CSS for defined specific group or scene or view as needed. ---
**Author:** ![CodyPrice59629](https://avatars.discourse-cdn.com/v4/letter/c/3da27b/32.png) [@CodyPrice59629](https://forums.knack.com/u/CodyPrice59629)\ **Post date:** [August 21, 2017, 11:02pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/8 "2017-08-21T23:02:15Z")
Does this css affect every group and form in my app?  I feel like it does.  Is there a way to define it so that it's only affecting specific groups on a specific page?  I have several forms(pages) and each form has a few groups. I'd like to be able to add a parameter that targets a specific page and specific groups on that page so I can add more columns to the layout. Thanks for your help! ---
**Author:** ![undefinedu16608](https://avatars.discourse-cdn.com/v4/letter/u/9f8e36/32.png) [@undefinedu16608](https://forums.knack.com/u/undefinedu16608)\ **Post date:** [January 2, 2016, 8:21pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/9 "2016-01-02T20:21:43Z")
found a solution to my earlier problem. If you want to keep the + sign on any additional options next to a field, this is the code: ul.kn-form-group{float:left} ul.kn-form-group {width:650px;margin-left: 25px;} ul.kn-form-group.clearfix:nth-child(3){clear:both} ul.kn-form-group.clearfix:nth-child(2){margin-left: 25px;} div.kn-submit{clear:both} ---
**Author:** ![DanielYoun21557](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@DanielYoun21557](https://forums.knack.com/u/DanielYoun21557)\ **Post date:** [October 24, 2015, 1:04pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/10 "2015-10-24T13:04:50Z")
Hi, You can choose the layout as 1 or 2 columns (Width) then for each group you can choose 1, 2 or 3 columns (Width) giving 6 columns wide. For rows down (Fields) or groups down you can add as required?? Do you have an example sketch? Thanks Dan ---
**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\ **Post date:** [July 26, 2015, 4:49pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/11 "2015-07-26T16:49:25Z")
Please add CSS something like below, adjust the width in px as needed. This should fix the issue. I have not tested this though. Please go ahead the test it out. -------------- ul.kn-form-group {width:100px;margin-left: 25px;} --------------- ---
**Author:** ![EnricoBise96679](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/enricobise96679/32/172_2.png) [@EnricoBise96679](https://forums.knack.com/u/EnricoBise96679)\ **Post date:** [July 26, 2015, 2:31pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/12 "2015-07-26T14:31:59Z")
Thanks, this is nice solution, it has some minor issues in that some of wider fields like short text will overlap the next column but I just managed to organise my fields so that was not an issue. Any way to control the gap between groups, looks a little cramped  ? Thanks again for your patience and help, appreciated  ---
**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\ **Post date:** [July 12, 2015, 5:57pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/13 "2015-07-12T17:57:20Z")
Enrico, You were near to what you want. --------- ul.kn-form-group{float:left} ul.kn-form-group.clearfix:nth-child(5){clear:both} //last column, please change 5 to last column value ul.kn-form-group.clearfix:nth-child(4){margin-left: 25px;} //repeat this for all except first and last column value ul.kn-form-group.clearfix:nth-child(3){margin-left: 25px;} please add this _ul.kn-form-group.clearfix:nth-child(3){clear:both} please remove this_   ul.kn-form-group.clearfix:nth-child(2){margin-left: 25px;} div.kn-submit{clear:both} --------- Please remember, in builder form, you should have 3 groups(each group as 2 columns). so, if you want six column, you would have 3 groups(each group as 2 columns) if you want have 7 column, you would have 4 groups[3 groups(each group as 2 columns), 4th one with 1 column]. Rest is CSS trick. I hope this make sense and you will achieve it. with regards, Raju ---
**Author:** ![EnricoBise96679](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/enricobise96679/32/172_2.png) [@EnricoBise96679](https://forums.knack.com/u/EnricoBise96679)\ **Post date:** [July 12, 2015, 4:41pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/14 "2015-07-12T16:41:41Z")
Hi I tried  1) ul.kn-form-group{float:left} ul.kn-form-group.clearfix:nth-child(3){clear:both} ul.kn-form-group.clearfix:nth-child(2){margin-left: 25px;} div.kn-submit{clear:both} ul.kn-form-group{float:left} ul.kn-form-group.clearfix:nth-child(5){clear:both} ul.kn-form-group.clearfix:nth-child(4){margin-left: 25px;} div.kn-submit{clear:both} and  2)  ul.kn-form-group{float:left} ul.kn-form-group.clearfix:nth-child(5){clear:both} ul.kn-form-group.clearfix:nth-child(4){margin-left: 25px;} ul.kn-form-group.clearfix:nth-child(3){clear:both} ul.kn-form-group.clearfix:nth-child(2){margin-left: 25px;} div.kn-submit{clear:both} on my form i had 4 groups each with 2 Col set. 4 Col is the max i could achieve.. if not obvious i know nothing about CSS Thanks  ---
**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\ **Post date:** [July 11, 2015, 2:05pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/15 "2015-07-11T14:05:48Z")
Hello Enrico, Trick mention above should work, you need to repeat following css with earlier one as mentioned earlier, matching the number of columns.. eg. for 4th column following css, for more add more. ul.kn-form-group.clearfix:nth-child(5){clear:both} ul.kn-form-group.clearfix:nth-child(4){margin-left: 25px;} Though, I have not tested this, please go ahead see how it work ---
**Author:** ![EnricoBise96679](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/enricobise96679/32/172_2.png) [@EnricoBise96679](https://forums.knack.com/u/EnricoBise96679)\ **Post date:** [July 11, 2015, 5:29am UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/16 "2015-07-11T05:29:56Z")
Hi , any way to make this go to 5 and or 6 Columns ? It would really help with the form i am currently working on  Thanks  ---
**Author:** ![EdCooper15510](https://avatars.discourse-cdn.com/v4/letter/e/9de053/32.png) [@EdCooper15510](https://forums.knack.com/u/EdCooper15510)\ **Post date:** [April 11, 2015, 5:22pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/17 "2015-04-11T17:22:11Z")
Raju: Do want to get into the app through Builder? Is that what you mean? If so, if you give me your email address I'll share the app through builder so you can see it all.  Send your email address to [edcooper714@gmail.com](mailto:edcooper714@gmail.com) Thanks for your help. ---
**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\ **Post date:** [April 11, 2015, 4:03pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/18 "2015-04-11T16:03:02Z")
Ed, is it possible to share you app link to view? ---
**Author:** ![EdCooper15510](https://avatars.discourse-cdn.com/v4/letter/e/9de053/32.png) [@EdCooper15510](https://forums.knack.com/u/EdCooper15510)\ **Post date:** [April 10, 2015, 10:12pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/19 "2015-04-10T22:12:03Z")
I'm having a problem. I don't know how to force a "line feed" so the result, as an example, is 4 columns on the first line, 3 columns on the second line etc etc. I've tried everything.  Hope to get some help on this. ---
**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\ **Post date:** [April 10, 2015, 9:04pm UTC](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302/20 "2015-04-10T21:04:48Z")
A suggestion to work with smaller screens - found the 3rd and 4th columns weren't scaling properly on phones but this did the trick:   ``` @media screen and (min-width: 501px) { ul.kn-form-group{float:left} ul.kn-form-group.clearfix:nth-child(3){clear:both} ul.kn-form-group.clearfix:nth-child(2){margin-left: 25px;} div.kn-submit{clear:both} } ```  Thanks to Benjamin for the idea to access the @media rule here [http://helpdesk.knackhq.com/support/discussions/topics/5000039346](http://helpdesk.knackhq.com/support/discussions/topics/5000039346) [Next page](https://forums.knack.com/t/making-3-or-4-column-layout-for-knack-form/10302.md?page=2)