# Category page layout in 2 columns

**URL:** https://meta.discourse.org/t/category-page-layout-in-2-columns/258739
**Category:** Development
**Created:** [March 20, 2023, 1:29pm UTC](https://meta.discourse.org/t/category-page-layout-in-2-columns/258739 "2023-03-20T13:29:36Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Joart](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@Joart](https://meta.discourse.org/u/Joart)
#### Post date: [March 20, 2023, 1:29pm UTC](https://meta.discourse.org/t/category-page-layout-in-2-columns/258739/1 "2023-03-20T13:29:37Z")

</div>

Hello,

I am trying to modify the layout of the category page.  
Each category is a table, so the category page is a list of tables.

 ![Document](https://global.discourse-cdn.com/meta/original/4X/8/e/a/8ea82be70e20ba61a636ed10b5e3d4418df44676.png)  
But, I would like to have a layout in 2 columns like that:  
 ![Document-1](https://global.discourse-cdn.com/meta/original/4X/9/b/6/9b66a19c52f840ce539617eb5475bb65a82b3079.png)  
Would you have any idea?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [March 20, 2023, 1:37pm UTC](https://meta.discourse.org/t/category-page-layout-in-2-columns/258739/2 "2023-03-20T13:37:51Z")

</div>

Did you try the out-of-the-shelf boxed layout?

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/b/c/8bcfe9ba4fedd3a7a203f69fa835917354345b14.png)

Have a look at the **desktop category page style setting** 🙂

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/5/5/0555691d5227ffee822f83e1ad398ac4d45d7e30.png)

If you want a custom solution, you can override the page template: [https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648#overriding-discourse-templates-23](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648#overriding-discourse-templates-23)

---

<div class="post-metadata">

### Author: ![Joart](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@Joart](https://meta.discourse.org/u/Joart)
#### Post date: [March 21, 2023, 7:36am UTC](https://meta.discourse.org/t/category-page-layout-in-2-columns/258739/3 "2023-03-21T07:36:54Z")

</div>

OK, thank you, I am going to try this.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [March 21, 2023, 7:38am UTC](https://meta.discourse.org/t/category-page-layout-in-2-columns/258739/4 "2023-03-21T07:38:46Z")

</div>

Masonry layout is only an experimental grid flow setting on Firefox and Safari at present and no good for production as not enabled by default.

You might want to revisit in one year and see if things have changed in the CSS space, see:

> **[CSS property: grid-template-rows: masonry | Can I use... Support tables for...](https://caniuse.com/mdn-css_properties_grid-template-rows_masonry)**
>
> "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

For now a symmetrical grid is the only sensible alternative, otherwise you are getting into having to use Javascript to deliver that. If you really want to go that route, you can look at the open source code in Topic List Previews or Topic List Thumbnails and adapt it for this use case.