# Tabs container on 2 lines

**URL:** <https://community.glideapps.com/t/tabs-container-on-2-lines/86868>\
**Category:** Ask for Help\
**Created:** [April 15, 2026, 10:43am UTC](https://community.glideapps.com/t/tabs-container-on-2-lines/86868 "2026-04-15T10:43:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Korbib](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/korbib/32/71813_2.png) [@Korbib](https://community.glideapps.com/u/Korbib)\
**Post date:** [April 15, 2026, 10:43am UTC](https://community.glideapps.com/t/tabs-container-on-2-lines/86868/1 "2026-04-15T10:43:05Z")

</div>

Hi there,

Is there a way to have something like this with the tabs container ?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/6/1638522ebcbe925bcda44147a8bcf7805e8726a6.png)

or maybe it’s a feature requests

---

<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:** [April 15, 2026, 7:24pm UTC](https://community.glideapps.com/t/tabs-container-on-2-lines/86868/2 "2026-04-15T19:24:48Z")

</div>

2 on top and 3 beneath, but it’s all the same tab menu?

---

<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:** [April 15, 2026, 7:36pm UTC](https://community.glideapps.com/t/tabs-container-on-2-lines/86868/3 "2026-04-15T19:36:57Z")

</div>

If you just want 3-wide with wrapped tab buttons, try this:

```auto
[role="tablist"][data-orientation="horizontal"] {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 0px !important;
}

[role="tablist"] [role="tab"] {
    flex: 0 0 33.33% !important;
    min-width: 33.33% !important;
    max-width: 33.33% !important;
    box-sizing: border-box !important;
    padding: 8px 4px !important;
}

[role="tab"] span {
    font-size: 0.8rem !important;
    text-align: center !important;
}

```

End result:

 ![CleanShot 2026-04-15 at 15.35.24@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/2/02086bc7ce94d77bff21869e39ec2dead9c760af.png)

Note: this only works for mobile tabs. This CSS will mess up desktop tabs, so you’ll want to create two tab containers…one for mobile with this styling and one for desktop (no custom css style) with visibility conditions set to screen small and screen large respectively.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [April 16, 2026, 3:52am UTC](https://community.glideapps.com/t/tabs-container-on-2-lines/86868/4 "2026-04-16T03:52:20Z")

</div>

Just adding an alternative approach that works well on mobile.

Glide already provides the `.mobile-layer` class for mobile views, so you can simply use it to scope responsive CSS.

```css
/* Target mobile only */
.mobile-layer [role="tablist"] {
  flex-wrap: wrap;
}

/* Default: 3 tabs per row */
.mobile-layer [role="tablist"] > button {
  flex: 1 1 30%;
}

/* First row: 2 tabs */
.mobile-layer [role="tablist"] > button:nth-child(-n+2) {
  flex: 1 1 48%; 
}

```

This produces a 2 / 3 layout on mobile while keeping the default behavior elsewhere.

---

<div class="post-metadata">

**Author:** ![Korbib](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/korbib/32/71813_2.png) [@Korbib](https://community.glideapps.com/u/Korbib)\
**Post date:** [April 16, 2026, 1:01pm UTC](https://community.glideapps.com/t/tabs-container-on-2-lines/86868/5 "2026-04-16T13:01:51Z")

</div>

Hi,

Thanks for all the replies 🙏

Just to explain a little more,

Actually the Tabs Container is not responsive when there is many tabs in the mobile version, this is so frustating.

The desktop version

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

The mobile version

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

so I’m looking for an alternative with the free version.

---

<div class="post-metadata">

**Author:** ![insect\_yoo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/insect_yoo/32/94527_2.png) [@insect\_yoo](https://community.glideapps.com/u/insect_yoo)\
**Post date:** [April 16, 2026, 1:32pm UTC](https://community.glideapps.com/t/tabs-container-on-2-lines/86868/6 "2026-04-16T13:32:13Z")

</div>

It probably works responsively in the actual published app, not the editor.

---

<div class="post-metadata">

**Author:** ![Korbib](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/korbib/32/71813_2.png) [@Korbib](https://community.glideapps.com/u/Korbib)\
**Post date:** [April 16, 2026, 1:35pm UTC](https://community.glideapps.com/t/tabs-container-on-2-lines/86868/7 "2026-04-16T13:35:59Z")

</div>

I can’t tell you because I have to pay to publish the app 🙄 🤷‍♂️