Syntax¶

Description: column is defined as a grid utility that creates a column-based grid for the element or elements it is applied to.

Arguments:

• <fraction> String | Number
  • Required argument
  • Sets the width of the element relative to its parent container
• <gutter> String | Literal
  • Default: 30px
  • Sets the gap between elements in a column through margin-right
• <cycle> String | Number
  • Default: fraction denominator
  • Set margin-right: 0 on the nth-child in the column
• <flex> Boolean
  • Default: true
  • If column should use flexbox
• <none> Boolean
  • Default: false
  • Resets the column back to the browser defaults

Example

// long hand
ctr('<#selector>', {
  grid: {
    column: {
      fraction: '<string>' | '<number>'
      gutter: '<string>' | 30px
      cycle: '<string>' | '<number>' | <fraction:denominator>
      flex: <boolean> | true
      none: <boolean> | false
    }
  }
})

# long hand
<#selector>:
  grid:
    column:
      fraction: <string> | <number>
      gutter: <string> | 30px
      cycle: <string> | <number> | <fraction:denominator>
      flex: <boolean> | true
      none: <boolean> | false

// shorthand
ctr('<#selector>', {
  grid: {
    column: '<fraction>' '<cycle>' '<gutter>' '<flex>'
  }
})

# shorthand
<#selector>:
  grid:
    column: [<fraction>, <cycle>, <gutter>, <flex>]

Notes

• You can use the default keyword to use the default value
• Both flex and non-flex examples should yield the same display results
• It is of critical importance that your parent element is a flexbox container, or if you are not using flexbox, the clearfix is applied to the parent element
• Lost Column

Fraction¶

Description: The value for fraction sets the width of the element relative to its parent container, or in other terms, how many columns the element will span.

ctr('.test', {
  grid: {
    column: {
      fraction: '1/3'
    }
  }
})

.test:
  grid:
    column:
      fraction: 1/3

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(1n) {
  margin-right: 30px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
}

ctr('.test', {
  grid: {
    column: {
      fraction: '1/3'
    }
  }
})

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(1n) {
  margin-right: 30px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
}

.test:
  grid:
    column:
      fraction: 1/3

// shorthand
ctr('.test', {
  grid: {
    // fraction cycle gutter flex
    column: '1/6'
  }
})

# shorthand
.test:
  grid:
    # fraction cycle gutter flex
    column: 1/6

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 6 - (30px - 30px * 1 / 6));
}
.test:nth-child(1n) {
  margin-right: 30px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(6n) {
  float: right;
  margin-right: 0;
}

// shorthand
ctr('.test', {
  grid: {
    // fraction cycle gutter flex
    column: '1/6'
  }
})

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 6 - (30px - 30px * 1 / 6));
}
.test:nth-child(1n) {
  margin-right: 30px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(6n) {
  float: right;
  margin-right: 0;
}

# shorthand
.test:
  grid:
    # fraction cycle gutter flex
    column: 1/6

Gutter¶

Description: The value for gutter sets the gap between elements in a column through margin-right: <gutter>.

ctr('.test', {
  grid: {
    column: {
      fraction: '1/3'
      gutter: 5vw
    }
  }
})

.test:
  grid:
    column:
      fraction: 1/3
      gutter: 5vw

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (5vw - 5vw * 1 / 3));
}
.test:nth-child(1n) {
  margin-right: 5vw;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
}

ctr('.test', {
  grid: {
    column: {
      fraction: '1/3'
      gutter: 5vw
    }
  }
})

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (5vw - 5vw * 1 / 3));
}
.test:nth-child(1n) {
  margin-right: 5vw;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
}

.test:
  grid:
    column:
      fraction: 1/3
      gutter: 5vw

// shorthand
ctr('.test', {
  grid: {
    // no gutter
    // fraction cycle gutter flex
    column: '1/3' default 0
  }
})

# shorthand
.test:
  grid:
    # no gutter
    # fraction cycle gutter flex
    column: [1/3, default, 0]

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3);
}
.test:nth-child(1n) {
  margin-right: 0;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
}

// shorthand
ctr('.test', {
  grid: {
    // no gutter
    // fraction cycle gutter flex
    column: '1/3' default 0
  }
})

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3);
}
.test:nth-child(1n) {
  margin-right: 0;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
}

# shorthand
.test:
  grid:
    # no gutter
    # fraction cycle gutter flex
    column: [1/3, default, 0]

Notes

• Default: 30px
• A gutter of 0 equals no gutter at all

Cycle¶

Description: Every element has float: left and margin-right: <gutter> applied to it except the last-child and the nth-child in the column where nth is controlled by cycle.

ctr('.test', {
  grid: {
    column: {
      fraction: '1/3'
      cycle: '2'
    }
  }
})

.test:
  grid:
    column:
      fraction: 1/3
      cycle: 2

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(1n) {
  margin-right: 30px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(2n) {
  float: right;
  margin-right: 0;
}

ctr('.test', {
  grid: {
    column: {
      fraction: '1/3'
      cycle: '2'
    }
  }
})

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(1n) {
  margin-right: 30px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(2n) {
  float: right;
  margin-right: 0;
}

.test:
  grid:
    column:
      fraction: 1/3
      cycle: 2

Notes

• Default: fraction denominator
• Per Lost’s documentation: “The concept of cycle is extremely important to Lost and what sets good Lost developers apart from great Lost developers.” ~ Controlling Cycle
  • In my opinion, cycle is not extremely important
• Lost Controlling Cycle

Non Flexbox¶

Description: The value of false can be set on the flex property to not use flexbox.

ctr('.test', {
  grid: {
    column: {
      flex: false
      fraction: '1/3'
    }
  }
})

.test:
  grid:
    column:
      flex: false
      fraction: 1/3

.test {
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(1n) {
  clear: none;
  float: left;
  margin-right: 30px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
}
.test:nth-child(3n+1) {
  clear: left;
}

ctr('.test', {
  grid: {
    column: {
      flex: false
      fraction: '1/3'
    }
  }
})

.test {
  width: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:nth-child(1n) {
  clear: none;
  float: left;
  margin-right: 30px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
}
.test:nth-child(3n+1) {
  clear: left;
}

.test:
  grid:
    column:
      flex: false
      fraction: 1/3

Notes

• Default: true

None¶

Description: The value of false for the none property resets the column back to the browser defaults.

ctr('.test', {
  grid: {
    column: {
      none: true
    }
  }
})

.test:
  grid:
    column:
      none: true

.test {
  width: auto;
}
.test:last-child {
  clear: none;
  float: none;
  width: auto;
  margin-right: 0;
}
.test:nth-child(n) {
  clear: none;
  float: none;
  width: auto;
  margin-right: 0;
}
.test:nth-child(1n+1) {
  clear: none;
  float: none;
  width: auto;
  margin-right: 0;
}
.test:nth-child(1n) {
  clear: none;
  float: none;
  width: auto;
  margin-right: 0;
}

ctr('.test', {
  grid: {
    column: {
      none: true
    }
  }
})

.test {
  width: auto;
}
.test:last-child {
  clear: none;
  float: none;
  width: auto;
  margin-right: 0;
}
.test:nth-child(n) {
  clear: none;
  float: none;
  width: auto;
  margin-right: 0;
}
.test:nth-child(1n+1) {
  clear: none;
  float: none;
  width: auto;
  margin-right: 0;
}
.test:nth-child(1n) {
  clear: none;
  float: none;
  width: auto;
  margin-right: 0;
}

.test:
  grid:
    column:
      none: true

Notes

• Default: false
• Alias: column: 'none'