DRYer way to set column widths than with if statement?

Question

Craft n00b here. Really loving it so far, but am wondering if how I'm implementing this is the best option, or if maybe there's a more sophisticated solution.

Inside our content builder switch statement, I'd like to provide my client with the ability to build an image-and-text block wherein they can change the widths of the columns via a dropdown (columnWidth), which will then set the widths of the children. Here's what I have so far, but it seems a little inelegant, especially if I were to do more options or columns. Any pointers or is this the best way to handle this?

{% if content.columnWidth == "1-2" %}
  {% set columnOneWidth = "1-of-3" %}
  {% set columnTwoWidth = "2-of-3" %}
{% elseif content.columnWidth == "1-1" %}
  {% set columnOneWidth = "1-of-2" %}
  {% set columnTwoWidth = "1-of-2" %}
{% elseif content.columnWidth == "2-1" %}
  {% set columnOneWidth = "2-of-3" %}
  {% set columnTwoWidth = "1-of-3" %}
{% endif %}

<div class="wrapper">
  <div class="column-{{ content.columnOneWidth }}">
    [...]
  </div>
  <div class="column-{{ content.columnTwoWidth }}">
    [...]
  </div>
</div>

Thanks!

Answer 1

One way to make it a bit more DRY and flexible is to use the split filter to create an array of column widths.

Also, you can save a bit of markup by calculating the total number of columns, and using a for loop to output the actual column DOM nodes:

{% set columns = content.columnWidth|default('1-2')|split('-') %}
{% set totalColumns = columns[0] + columns[1] %}

<div class="wrapper">
    {% for column in columns %}
        <div class="column-{{ column }}-of-{{ totalColumns }}">
           [...]
        </div>
    {% endfor %}
</div>