# choice interface in columns

**URL:** <https://support.prodi.gy/t/choice-interface-in-columns/3711>\
**Category:** Uncategorized\
**Tags:** usage, textcat, front-end, solved\
**Created:** [December 7, 2020, 3:39pm UTC](https://support.prodi.gy/t/choice-interface-in-columns/3711 "2020-12-07T15:39:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aph61](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/aph61/32/417_2.png) [@aph61](https://support.prodi.gy/u/aph61)\
**Post date:** [December 7, 2020, 3:39pm UTC](https://support.prodi.gy/t/choice-interface-in-columns/3711/1 "2020-12-07T15:39:18Z")

</div>

I know it has been discussed earlier, but I can't get it to work.

My scenario is a multi-label, multi-category (15 in total), and each sentences has to be tagged with 3/15 choices. The only workable UX is obviously a 3 column, 5 row solution.

I took the cat-example UX ([https://prodi.gy/docs/custom-interfaces](https://prodi.gy/docs/custom-interfaces)) as example, and modified as suggested in [Display choice options in columns](https://support.prodi.gy/t/display-choice-options-in-columns/496). One of the solutions was to use grid-template-columns structure like  
.c01132 {  
display: grid;  
grid-template-columns: 1fr 1fr;  
grid-gap: 20px;  
}}  
but that did not work (I did not understand where to put this piece of code). I checked the code at [https://gridbyexample.com/examples/example1/](https://gridbyexample.com/examples/example1/)

{"view\_id": "choice", "text": None,  
"style": {"display": "grid",  
"grid-template-columns": "100px 100px",  
"grid-gap": "20px"}}  
options = [  
{"id": 3, "text": "😺 Correct", "style": {"grid-column-start": 1, "grid-column-end": 2, "grid-row-start": 1, "grid-row-end": 2}},  
{"id": 2, "text": "😼 Partially correct", "style": {"grid-column-start": 2, "grid-column-end": 3, "grid-row-start": 1, "grid-row-end": 2}},  
{"id": 1, "text": "😾 Wrong", "style": {"grid-column-start": 1, "grid-column-end": 2, "grid-row-start": 2, "grid-row-end": 3}},  
{"id": 0, "text": "🙀 Don't know", "style": {"grid-column-start": 2, "grid-column-end": 3, "grid-row-start": 2, "grid-row-end": 3}}  
]

but that did not work. Any suggestions on how to solve this?

thanks,

Andreas

---

<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:** [December 8, 2020, 5:02am UTC](https://support.prodi.gy/t/choice-interface-in-columns/3711/2 "2020-12-08T05:02:32Z")

</div>

Hi! You'll need to add your CSS to the config via the `global_css` setting (as a single string) – also see the example in [my comment here](https://support.prodi.gy/t/display-choice-options-in-columns/496/5).

If you want to have equal columns, you shouldn't have to set any style on the children, just define the columns of the parent block. If you do want to have custom columns for the different options, the easiest way is to target them with `:nth-child` in the global CSS (so you have all styling in one place). If you want to define styles on the individual options, you can do that, too – but it needs to be a dictionary with camel-cased options (as shown in the data format example [here](https://prodi.gy/docs/api-interfaces#choice)).

---

<div class="post-metadata">

**Author:** ![aph61](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/aph61/32/417_2.png) [@aph61](https://support.prodi.gy/u/aph61)\
**Post date:** [December 8, 2020, 10:35am UTC](https://support.prodi.gy/t/choice-interface-in-columns/3711/3 "2020-12-08T10:35:48Z")

</div>

Hi Ines,

thanks! It worked like a charm. I got stuck on the "where do I put this piece of code"

thanks!

Andreas