Display only 2 columns

Hi,

The CSS that determines the columns can be overridden. I use a pre-processor to generate them but the final output is as follows:

.letter-section ul.columns {
    column-gap: 0.6em;
    column-width: 15em;
}
.letter-section ul.columns.max-0-columns,
.letter-section ul.columns.max-1-columns {
      column-count: 1;
      max-width: 15.6em;
}
.letter-section ul.columns.max-2-columns {
      column-count: 2;
      max-width: 30.6em;
}
.letter-section ul.columns.max-3-columns {
      column-count: 3;
      max-width: 46.2em;
}
.letter-section ul.columns.max-4-columns {
      column-count: 4;
      max-width: 61.8em;
}
.letter-section ul.columns.max-5-columns {
      column-count: 5;
      max-width: 77.4em;
}
.letter-section ul.columns.max-6-columns {
      column-count: 6;
      max-width: 93em;
}
.letter-section ul.columns.max-7-columns {
      column-count: 7;
      max-width: 108.6em;
}
.letter-section ul.columns.max-8-columns {
      column-count: 8;
      max-width: 124.2em;
}
.letter-section ul.columns.max-9-columns {
      column-count: 9;
      max-width: 139.8em;
}
.letter-section ul.columns.max-10-columns {
      column-count: 10;
      max-width: 155.4em;
}
.letter-section ul.columns.max-11-columns {
      column-count: 11;
      max-width: 171em;
}
.letter-section ul.columns.max-12-columns {
      column-count: 12;
      max-width: 186.6em;
}
.letter-section ul.columns.max-13-columns {
      column-count: 13;
      max-width: 202.2em;
}
.letter-section ul.columns.max-14-columns {
      column-count: 14;
      max-width: 217.8em;
}
.letter-section ul.columns.max-15-columns {
      column-count: 15;
      max-width: 233.4em;
}

Hopefully, it should be clear that the column width is determined by column-width in the first selector. The rest of the rules are about limiting the number of columns so that there are always several items in each column before adding another column. This prevents situations where you have 5 columns each with a single item within. Instead, you’ll get a single column with 5 items rather than 5 columns with 1 item.

The max-width in the max-x-columns selectors is the number of columns multiplied by the column width and then 0.6em added to account for the column-gap.

If you use SCSS as a preprocessor you can generate the rules with:

.letter-section ul.columns {
    column-gap: 0.6em;
    column-width: 15em;

    &.max-0-columns,
    &.max-1-columns {
        column-count: 1;
        max-width: 15.6em;
    }
    @for $column from 2 to 16 {
        &.max-#{$column}-columns {
            column-count: $column;
            max-width: ($column * 15em) + (($column - 1) * 0.6em);
        }
    }
}

Hi,

You need to modify both the column-width in the top selector and the max-width in each of the max-x-columns selectors. If you want to ensure that you never have more than two columns, then once you’ve set the column-width you can set all the selectors for max-x-columns where x is greater than 2 to have the same max-width setting.

For example, if you want to have columns 25em wide instead of the default 15em and restrict to only ever showing 2 columns, you can add the following CSS:

.letter-section ul.columns {
    column-gap: 0.6em;
    column-width: 25em;
}
.letter-section ul.columns.max-0-columns,
.letter-section ul.columns.max-1-columns {
      column-count: 1;
      max-width: 25.6em;
}
.letter-section ul.columns.max-2-columns,
.letter-section ul.columns.max-3-columns,
.letter-section ul.columns.max-4-columns,
.letter-section ul.columns.max-5-columns,
.letter-section ul.columns.max-6-columns,
.letter-section ul.columns.max-7-columns,
.letter-section ul.columns.max-8-columns,
.letter-section ul.columns.max-9-columns,
.letter-section ul.columns.max-10-columns,
.letter-section ul.columns.max-11-columns,
.letter-section ul.columns.max-12-columns,
.letter-section ul.columns.max-13-columns,
.letter-section ul.columns.max-14-columns,
.letter-section ul.columns.max-15-columns {
      column-count: 2;
      max-width: 50.6em;
}