Using LESS to create multiple columns with equal gutter and content widths.

Auto Column mixin

.box-to-grid( @columns; @gutter-size: 2em ){
    @responsiveColumn: ( 100 / @columns );
    @columnAdjust: ( ( ( @columns - 1 ) * @gutter-size ) / @columns ) ;
    vertical-align: top;
    display: inline-block;
    margin-left: @gutter-size;
    width: calc( ~"@{responsiveColumn}% - @{columnAdjust}" ) ;
    &:nth-of-type( @{columns}n+1 ){
        margin-left: 0;
    }
}

.card {
    .box-to-grid(3, 3em);
}