# How to fit 5 elements in a horizontal list?

**URL:** <https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753>\
**Category:** Ask for Help\
**Created:** [January 5, 2022, 10:17pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753 "2022-01-05T22:17:39Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [January 5, 2022, 10:17pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/1 "2022-01-05T22:17:39Z")

</div>

Hi guys,

I’m having some fun trying to replicate a word game. It centers on forming 5 letter words using letter tiles. My issue is that the max number of tiles that I can show in a horizontal list seems to be 4. Hence, you have to add a scroll option, which is a pain. I would really like to be able to the full 5 letter word at any one time.

Is there an option I am missing that will display 5 elements in a list? Or perhaps there is some coding magic that can shrink the list so that 5 will fit across a screen?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/5/9502f85f9c71c60937e11fc5653c8eaa1813c606.png)

Thanks in advance,

Simon.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 5, 2022, 10:32pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/2 "2022-01-05T22:32:23Z")

</div>

You’d need to use CSS. Something like this, but you’ll need to play with the height/widths (both 45px below)

```auto
<pre><span><style>
//requires tiles, 4-wide, horizontal layout

.inner {
grid-template-columns: repeat(5, 45px) !important;
}

.tile-image-area :nth-child(1) {
height: 45px;
}

```

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [January 5, 2022, 10:34pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/3 "2022-01-05T22:34:54Z")

</div>

Thanks so much! I will experiment 🙂

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 5, 2022, 10:35pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/4 "2022-01-05T22:35:41Z")

</div>

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/dl/ewAiAHQAIgA6ADIALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AYwBvAGQAZQBzACIALAAiAHIAIgA6ACIANgA0AGIAVwBSAFAAawBRAFEAQgBxAEQAbQBPAG8AZwB1AEMAWQB3AGMAQQAiACwAIgBuACIAOgAiAEMAUwBTACAAYwBvAGQAZQAiAH0A/full)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [January 5, 2022, 10:45pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/5 "2022-01-05T22:45:47Z")

</div>

I seem to be struggling. My first time with CSS, can I double check:

- I created a Rich text element then pasted your code into it.
- I have changed the two ‘45’ values to a lot of options, from 5 through to 500.

The result is the heights of the tiles change, but at no time does the 5th element begin to appear… any tips please?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/7/37e75c86476d65e67d685df70eee226c5d372ec5.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 5, 2022, 10:51pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/6 "2022-01-05T22:51:14Z")

</div>

change list settings

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [January 5, 2022, 10:52pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/7 "2022-01-05T22:52:59Z")

</div>

I have tried… is there something you can recommend specifically?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 5, 2022, 11:02pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/8 "2022-01-05T23:02:52Z")

</div>

are you using my code or Robert’s?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 5, 2022, 11:06pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/9 "2022-01-05T23:06:00Z")

</div>

Sorry. I’m on my phone right now so I must’ve miscopied my code. When I get in front of a computer tonight I’ll send you the correct CSS.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 5, 2022, 11:12pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/10 "2022-01-05T23:12:32Z")

</div>

delete the comment in Roberts code… drag rich text element at the end… and it should work now…

```auto
<pre><span><style>

.inner {
grid-template-columns: repeat(5, 50%) !important;
}

.tile-image-area :nth-child(1) {
height: 45px;
}

```

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 6, 2022, 2:48am UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/11 "2022-01-06T02:48:21Z")

</div>

Ya…try this:

```auto
<pre><span><style>
[data-test="app-horizontal-list"] .inner {
grid-template-columns: repeat(5, 66.5px) !important;
margin: 15px;
column-gap: 3px !important;
}
[data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
   height: 70px;
}

```

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [January 6, 2022, 6:20am UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/12 "2022-01-06T06:20:12Z")

</div>

Brilliant thank you!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/4/a4ef79cec2d5ff53ef884b6bda16319c133e1f16.png)

Can’t quite center the letters but I can live with that 🙂

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 6, 2022, 8:13am UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/13 "2022-01-06T08:13:06Z")

</div>

> [@Simon\_Hill](#):
>
> Can’t quite center the letters

Is that letter a field you referenced in the inline list?

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [January 6, 2022, 2:14pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/14 "2022-01-06T14:14:47Z")

</div>

Yes that’s right. The tile has a color background (image) and then the letter is a column entry…

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 6, 2022, 11:57pm UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/15 "2022-01-06T23:57:09Z")

</div>

Change your alignment to center and use this code.

```auto
<pre><span><style>

[data-test="app-horizontal-list"] .inner {
grid-template-columns: repeat(5, 66.5px) !important;
margin: 15px;
column-gap: 3px !important;
}

[data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
   height: 50px;
}

[data-test="app-horizontal-list"] .tile-overlay {
background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
}

[data-test="app-horizontal-list"] .tile-overlay .tile-title {
padding-top: 10px;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/43ff538f674b11519be6ec09817c9bf87552f5f2.png)

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [January 7, 2022, 7:34am UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/16 "2022-01-07T07:34:54Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> 
> [data-test="app-horizontal-list"] .inner {
> grid-template-columns: repeat(5, 66.5px) !important;
> margin: 15px;
> column-gap: 3px !important;
> }
> 
> [data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
> height: 50px;
> }
> 
> [data-test="app-horizontal-list"] .tile-overlay {
> background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
> }
> 
> [data-test="app-horizontal-list"] .tile-overlay .tile-title {
> padding-top: 10px;
> }
> 
> ```

Wow that’s now perfect! Thank you so much 🙂

And how did you manage to get this is just 19 seconds?!! Genius mode!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c7b590d1b22274fc77d5a69a5c2b37233bd6398.png)

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [January 8, 2022, 7:35am UTC](https://community.glideapps.com/t/how-to-fit-5-elements-in-a-horizontal-list/36753/17 "2022-01-08T07:35:26Z")

</div>

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