# Creating a custom grid layout for checkboxes in Prodigy UI

**URL:** <https://support.prodi.gy/t/creating-a-custom-grid-layout-for-checkboxes-in-prodigy-ui/4005>\
**Category:** Uncategorized\
**Tags:** usage, custom, front-end\
**Created:** [March 10, 2021, 11:00am UTC](https://support.prodi.gy/t/creating-a-custom-grid-layout-for-checkboxes-in-prodigy-ui/4005 "2021-03-10T11:00:05Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [March 11, 2021, 12:19am UTC](https://support.prodi.gy/t/creating-a-custom-grid-layout-for-checkboxes-in-prodigy-ui/4005/2 "2021-03-11T00:19:56Z")

</div>

Hi! Here's a very small CSS snippet that should work pretty much out-of-the-box:

> [@Display choice options in columns](https://support.prodi.gy/t/display-choice-options-in-columns/496/5):
>
> With the new global\_css option in v1.7, you should be able to add this pretty easily. The options container doesn’t have a human-readable class name at the moment, but you can find the current compiled one by opening your browser’s developer tools: If you’re using a modern browser, the following CSS should be all you need: .c01132 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } This will display the contents of that container (i.e. the options) using [CSS …](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

If you need more than two columns, you can just add another entry to the `grid-template-columns`. You can also customise the [`cardMaxWidth`](https://prodi.gy/docs/api-web-app#theme-sizes) theme setting if you need the annotation card to be wider and give it more space for the columns.

---

_[View the full topic](https://support.prodi.gy/t/creating-a-custom-grid-layout-for-checkboxes-in-prodigy-ui/4005)._