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:

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

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.

Edit
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
Child
Child
Child
Edit
// 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
Child
Child
Child

Gutter

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

Edit
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
Child
Child
Child
Edit
// 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]
Child
Child
Child

Notes

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.

Edit
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

Non Flexbox

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

Edit
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

None

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

Edit
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