# CSS to display more than 4 horizontal tiles

**URL:** <https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790>\
**Category:** Ask for Help\
**Created:** [July 2, 2022, 12:49am UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790 "2022-07-02T00:49:45Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [July 2, 2022, 12:49am UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/1 "2022-07-02T00:49:45Z")

</div>

Hi Experts,

So this is going to be a challenge for all CSS Experts 😃 .

I was facing a challenge to display 8 horizontal tiles in one row but I achieved that through CSS. Thanks to @Lucas_Pires and @Robert_Petitto.

Now, I need to display 16 tiles as shown on the screenshot 🙈. I am sure this is going to be trickier, but I am also sure nothing is trickier for our super experts 😃

First screenshot shows what I want to achieve, and second screenshot shows what I have done till now.

Looking forward to some helpful responses from our experts 🙂

 ![Screenshot_20220702-054526_WhatsAppBusiness](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/4/c4609bfa08dadafebd1935afc6c70b9394f9e325.jpeg)  
 ![Help css](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/a/0aa765e372403b6a0668dc8420a192a65e8c1844.png)

---

<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:** [July 2, 2022, 1:11am UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/2 "2022-07-02T01:11:09Z")

</div>

Seeing you have the CSS code for other “lines” already, wouldn’t it just be a matter of changing the repeat params? (Say 16, 5px - there’s not a lot of screen estate to work with, to be honest)

---

<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:** [July 2, 2022, 4:39am UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/3 "2022-07-02T04:39:17Z")

</div>

Maybe you could use GraphViz?

[https://quickchart.io/documentation/graphviz-api/](https://quickchart.io/documentation/graphviz-api/)

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [July 2, 2022, 10:37pm UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/4 "2022-07-02T22:37:14Z")

</div>

The thing is, this is basically a checklist app. When a circle is tapped, it is changed into BLUE color. I don’t think I can use quickcharts for that.

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [July 2, 2022, 10:37pm UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/5 "2022-07-02T22:37:45Z")

</div>

Yes true, but the circles are not fitting in when I set the params to 16 - 5 px

---

<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:** [July 2, 2022, 11:12pm UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/6 "2022-07-02T23:12:21Z")

</div>

Can you send over a screenshot on how it looks like at the moment?

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [July 2, 2022, 11:33pm UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/7 "2022-07-02T23:33:04Z")

</div>

I found the solution!!! There was a piece missing on my existing CSS code. Entered that and it works just like I wanted.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [July 3, 2022, 2:07am UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/8 "2022-07-03T02:07:34Z")

</div>

It would be nice if you could share the CSS, just in case somebody else wants to do something similar in future. And for that matter, a more descriptive topic title would also be useful.

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [July 3, 2022, 2:27pm UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/9 "2022-07-03T14:27:06Z")

</div>

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

div[id*='screenScrollView'] > div > :nth-of-type(9) [data-test="app-horizontal-list"] .inner {
grid-template-columns: repeat(16, 20px) !important;
margin: 1px;
column-gap: 1.75px !important;
}
div[id*='screenScrollView'] > div > :nth-of-type(9) [data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
   height: 20px;
}

```

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [July 3, 2022, 2:27pm UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/10 "2022-07-03T14:27:45Z")

</div>

![CSS to display](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/4/e430c5c840679ce9784547d05bd9908e2f2e6667.png)

---

<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:** [July 3, 2022, 9:25pm UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/11 "2022-07-03T21:25:16Z")

</div>

Yes! This is what I do here:

> [@CSS to create overlapping profile images](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783):
>
> I want to turn a horizontal list of tiles into an overlapping list of tiles like you see in most social media apps. If you can figure this out using CSS, I’d be happy to compensate your time. Turn this… …into this (+2 not necessary): [image]

---

<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:** [July 4, 2022, 9:26pm UTC](https://community.glideapps.com/t/css-to-display-more-than-4-horizontal-tiles/43790/12 "2022-07-04T21:26:08Z")

</div>

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