# More list columns

**URL:** <https://forums.knack.com/t/more-list-columns/6552>\
**Category:** Get Answers\
**Created:** [January 6, 2020, 7:07am UTC](https://forums.knack.com/t/more-list-columns/6552 "2020-01-06T07:07:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![TonyLewis75327](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/tonylewis75327/32/261_2.png) [@TonyLewis75327](https://forums.knack.com/u/TonyLewis75327)\
**Post date:** [January 6, 2020, 7:07am UTC](https://forums.knack.com/t/more-list-columns/6552/1 "2020-01-06T07:07:34Z")

</div>

I would like to show more than 3 columns in my list view. Does anyone have the code for expanding the number of columns?

---

<div class="post-metadata">

**Author:** ![TonyLewis75327](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/tonylewis75327/32/261_2.png) [@TonyLewis75327](https://forums.knack.com/u/TonyLewis75327)\
**Post date:** [January 8, 2020, 1:59am UTC](https://forums.knack.com/t/more-list-columns/6552/2 "2020-01-08T01:59:29Z")

</div>

Brad, you're genius thank you!

---

<div class="post-metadata">

**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:** [January 7, 2020, 12:02am UTC](https://forums.knack.com/t/more-list-columns/6552/3 "2020-01-07T00:02:44Z")

</div>

Hi Tony, I believe this will work - you might need to add the !Important rule though.

The container of the list has the class .kn-list-content and the display is set to flex - so any child can then be set to a determined width and they'll fit the flex parent and in this case horizontally.

Inspecting the default width of children (class is .kn-list-item-container) the width is 33.33% - so three to a row.

To make it four:

```
.kn-list-item-container {width:25%}
```

---

<div class="post-metadata">

**Author:** ![Simonm](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@Simonm](https://forums.knack.com/u/Simonm)\
**Post date:** [September 17, 2021, 11:24am UTC](https://forums.knack.com/t/more-list-columns/6552/4 "2021-09-17T11:24:55Z")

</div>

Hi Brad, thank you for the trick. I have been struggling to have two columns showing up in a mobile devices, I even tried @madia queries but couldn’t succeed, any help will be appreciated.

---

<div class="post-metadata">

**Author:** ![BobLove38845](https://avatars.discourse-cdn.com/v4/letter/b/779978/32.png) [@BobLove38845](https://forums.knack.com/u/BobLove38845)\
**Post date:** [March 10, 2024, 1:41am UTC](https://forums.knack.com/t/more-list-columns/6552/5 "2024-03-10T01:41:16Z")

</div>

> [@BradStevens](#):
>
> Hi Tony, I believe this will work - you might need to add the !Important rule though.
> 
> The container of the list has the class .kn-list-content and the display is set to flex - so any child can then be set to a determined width and they’ll fit the flex parent and in this case horizontally.
> 
> Inspecting the default width of children (class is .kn-list-item-container) the width is 33.33% - so three to a row.
> 
> To make it four:
> 
> .kn-list-item-container {width:25%}

Hey Brad thanks for this but, I must not be doing something correctly. I have two lists side-by-side and each list is one column wide and I want to have 4 fields in a row within the list column. However, when I apply the css it makes the whole list be 25%.  
Got any clue what I am doing wrong?  
Thank you!

---

<div class="post-metadata">

**Author:** ![BobLove38845](https://avatars.discourse-cdn.com/v4/letter/b/779978/32.png) [@BobLove38845](https://forums.knack.com/u/BobLove38845)\
**Post date:** [March 10, 2024, 1:43am UTC](https://forums.knack.com/t/more-list-columns/6552/6 "2024-03-10T01:43:40Z")

</div>

Here is the way I have it in my CSS:

#view\_1787 {

.kn-list-item-container {width:25%} !important;

}