Dynamic column width with css calc()

Dynamic-column-width-with-css-calc().markdown

Dynamic column width with css calc()

The general formula of the column width for a known separator width is columnWidth = ( fullWidth + separatorWidth * (1 - columnNb) ) / columnNb

A Pen by David on CodePen.

index.jade

h1 Dynamic column width with css calc()

p The general formula of the column width for a known separator width is 
  code
    | columnWidth = ( fullWidth + separatorWidth * (1 - columnNb) ) / columnNb

h2 Examples

p Separator width = 10px

.row
  .column.width-1-2
    | column-1-2
  .column.width-1-2
    | column-1-2
.row
  .column.width-1-3
    | column-1-3
  .column.width-1-3
    | column-1-3
  .column.width-1-3
    | column-1-3
.row
  .column.width-1-4
    | column-1-4
  .column.width-1-4
    | column-1-4
  .column.width-1-4
    | column-1-4
  .column.width-1-4
    | column-1-4
.row
  .column.width-1-5
    | column-1-5
  .column.width-1-5
    | column-1-5
  .column.width-1-5
    | column-1-5
  .column.width-1-5
    | column-1-5
  .column.width-1-5
    | column-1-5
.row
  .column.width-1-6
    | column-1-6
  .column.width-1-6
    | column-1-6
  .column.width-1-6
    | column-1-6
  .column.width-1-6
    | column-1-6
  .column.width-1-6
    | column-1-6
  .column.width-1-6
    | column-1-6
.row
  .column.width-1-7
    | column-1-7
  .column.width-1-7
    | column-1-7
  .column.width-1-7
    | column-1-7
  .column.width-1-7
    | column-1-7
  .column.width-1-7
    | column-1-7
  .column.width-1-7
    | column-1-7
  .column.width-1-7
    | column-1-7

style.scss

/*
The general formula of the column width for a known separator width: 
  columnWidth = ( fullWidth + separatorWidth * (1 - columnNb) ) / columnNb
*/

// e.g. 
@mixin genColumnWidth(
  $colNumber, 
  $separatorWidth: 10px,
  $fullWidth: 100%) {
    
  &.width-1-#{$colNumber} {
    width: calc((#{$fullWidth} + #{$separatorWidth} * (1 - #{$colNumber})) / #{$colNumber});
    margin-right: $separatorWidth;

    &:nth-child(#{$colNumber}n) {
      margin-right: 0;
    }

    @content;
  }
}

.row {
  background: blue;
}

.column {
  float: left;
  
  @include genColumnWidth(2) {
    background: cyan;
  }
  @include genColumnWidth(3) {
    background: yellow;
  }
  @include genColumnWidth(4) {
    background: magenta;
  }
  @include genColumnWidth(5) {
    background: red;
  }
  @include genColumnWidth(6) {
    background: green;
  }
  @include genColumnWidth(7) {
    background: brown;
  }
}