# How to sort cards vertically

**URL:** <https://discourse.nodered.org/t/how-to-sort-cards-vertically/39121>\
**Category:** Dashboard\
**Created:** [14 January 2021 14:33 UTC](https://discourse.nodered.org/t/how-to-sort-cards-vertically/39121 "2021-01-14T14:33:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![samezrp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/samezrp/32/31968_2.png) [@samezrp](https://discourse.nodered.org/u/samezrp)\
**Post date:** [14 January 2021 14:33 UTC](https://discourse.nodered.org/t/how-to-sort-cards-vertically/39121/1 "2021-01-14T14:33:23Z")

</div>

I red proposed solution when wrote this topic, searched google and I cannot find any way to place cards vertically.  
I mean I have layout as this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/b/6bca5fad1f323b7836f22c97338297d8efcdd234.png)  
and I would like to place them like that:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4cd2597c6e7d8b5d082cb11155a632827f741881.png)  
How without making all cards wide as screen width?

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [14 January 2021 14:54 UTC](https://discourse.nodered.org/t/how-to-sort-cards-vertically/39121/2 "2021-01-14T14:54:59Z")

</div>

You could try placing this code in a ui\_template (found in the dashboard group) in your flow.  
You'll have to experiment with the pixel value.

```auto
<style>
.masonry-container {
    width: 800px;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [14 January 2021 15:06 UTC](https://discourse.nodered.org/t/how-to-sort-cards-vertically/39121/3 "2021-01-14T15:06:03Z")

</div>

If you always want it to look like the second example, whatever sized screen you use, then put everything in one group. Then you have full control of the layout.

---

<div class="post-metadata">

**Author:** ![samezrp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/samezrp/32/31968_2.png) [@samezrp](https://discourse.nodered.org/u/samezrp)\
**Post date:** [15 January 2021 09:10 UTC](https://discourse.nodered.org/t/how-to-sort-cards-vertically/39121/4 "2021-01-15T09:10:22Z")

</div>

@[dynamicdave](https://discourse.nodered.org/u/dynamicdave)  
Thanks, started to look promising:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/88d55c6062a57de56bda8e664c6f815a50a8a45b.png)  
@[Colin](https://discourse.nodered.org/u/Colin)  
Thanks for hint, you are right, in that case worse look (no borders), but no different look on different devices.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [14 February 2021 09:10 UTC](https://discourse.nodered.org/t/how-to-sort-cards-vertically/39121/5 "2021-02-14T09:10:28Z")

</div>

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