# Stackable list - is it possible to make the options horizontal and allow wrap?

**URL:** <https://community.weweb.io/t/stackable-list-is-it-possible-to-make-the-options-horizontal-and-allow-wrap/7588>\
**Category:** How do I?\
**Tags:** design\
**Created:** [March 14, 2024, 10:36pm UTC](https://community.weweb.io/t/stackable-list-is-it-possible-to-make-the-options-horizontal-and-allow-wrap/7588 "2024-03-14T22:36:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![adammiko](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@adammiko](https://community.weweb.io/u/adammiko)\
**Post date:** [March 14, 2024, 10:36pm UTC](https://community.weweb.io/t/stackable-list-is-it-possible-to-make-the-options-horizontal-and-allow-wrap/7588/1 "2024-03-14T22:36:04Z")

</div>

Hi there,

I love the Stackable element. I am wondering if it would be possible to give the Stackable List element the ability to be horizontal instead of vertical and allow elements to wrap around?

I am trying to basically create cards in a three across style which wrap around so the order of the cards would be

123  
456  
678

And I want the ability to drag 7 to where 2 is and push back the index of every other card by 1.

@Quentin @Joyce

Thank you

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [March 18, 2024, 10:15am UTC](https://community.weweb.io/t/stackable-list-is-it-possible-to-make-the-options-horizontal-and-allow-wrap/7588/2 "2024-03-18T10:15:09Z")

</div>

Not possible at the moment I believe, but a good suggestion. The team is currently focusing on revamping elements so we will keep this in mind when we come to the stackable list

---

<div class="post-metadata">

**Author:** ![EvilHIdden](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/evilhidden/32/7014_2.png) [@EvilHIdden](https://community.weweb.io/u/EvilHIdden)\
**Post date:** [July 12, 2024, 7:53pm UTC](https://community.weweb.io/t/stackable-list-is-it-possible-to-make-the-options-horizontal-and-allow-wrap/7588/3 "2024-07-12T19:53:25Z")

</div>

+1 For horizontal layout

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [July 12, 2024, 8:24pm UTC](https://community.weweb.io/t/stackable-list-is-it-possible-to-make-the-options-horizontal-and-allow-wrap/7588/4 "2024-07-12T20:24:11Z")

</div>

You can do this with CSS. The underlying library takes the direction of the layout as the direction of the sortable. I achieved this before with just custom CSS, but it requires some tinkering.

---

<div class="post-metadata">

**Author:** ![bigduck](https://avatars.discourse-cdn.com/v4/letter/b/f475e1/32.png) [@bigduck](https://community.weweb.io/u/bigduck)\
**Post date:** [February 19, 2025, 7:52pm UTC](https://community.weweb.io/t/stackable-list-is-it-possible-to-make-the-options-horizontal-and-allow-wrap/7588/5 "2025-02-19T19:52:58Z")

</div>

Hey are you able to expand on this and provide an example of the CSS you used? Would be super helpful!

---

<div class="post-metadata">

**Author:** ![bigduck](https://avatars.discourse-cdn.com/v4/letter/b/f475e1/32.png) [@bigduck](https://community.weweb.io/u/bigduck)\
**Post date:** [February 19, 2025, 7:56pm UTC](https://community.weweb.io/t/stackable-list-is-it-possible-to-make-the-options-horizontal-and-allow-wrap/7588/6 "2025-02-19T19:56:09Z")

</div>

Nvm! for anyone viewing this thread later, add the following CSS to any list to achieve a horizontal layout:

flex-direction: row;

---

<div class="post-metadata">

**Author:** ![EduardoChaves](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/eduardochaves/32/12460_2.png) [@EduardoChaves](https://community.weweb.io/u/EduardoChaves)\
**Post date:** [February 24, 2025, 6:08pm UTC](https://community.weweb.io/t/stackable-list-is-it-possible-to-make-the-options-horizontal-and-allow-wrap/7588/7 "2025-02-24T18:08:52Z")

</div>

I achieved it with this CSS as well (flex uses row direction by default):

```css
display: flex;
gap: 8px;

```