Calculate column width in SCSS for CSS columns to nicely collapse exactly at the point where the container starts to shrink on resize

column-calc.scss

$container-max-width: 72rem;  /* from here on the columns start collapsing */
$container-padding: 2rem;     /* added because we don't like text sticking to the edges on mobiles */
$columns: 3;                  /* number of columns @ the max-width of the container */
$columns-gap: 4rem;           /* space between the columns */

/*  pretty straightforward but here comes the magic:
    the single column width is the result after
    - the gap between the columns (always 1 less than the total number of columns)
    - the container padding (applied on the left and on the right)
    are subtracted from the width of the container and then
    - gets divided by the total number of columns 
*/

$column-width: ($container-max-width - (($columns - 1) * $columns-gap) - ($container-padding * 2)) / $columns;

.container {
	margin: 0 auto; /* center the container for display purposes */
	max-width: $container-max-width;
	padding: $container-padding;
}

.col {
	columns: $columns;
	column-width: $column-width;
	column-gap: $columns-gap;
	column-rule: 1px dotted #555; /* we want to be fancy */
}