Local

Description: Options can be changed in a grid Object through the option Object.

Edit
ctr('.test', {
grid: {
// set option for both align and column
option: {
flexbox: false
gutter: 60px
}
align: {
location: 'bottom-center'
}
column: {
fraction: '1/4'
cycle: '3'
}
}
})
.test:
grid:
# set option for both align and column
option:
flexbox: false
gutter: 60px
align:
location: bottom-center
column:
fraction: 1/4
cycle: 3
.test {
position: relative;
width: calc(99.9% * 1 / 4 - (60px - 60px * 1 / 4));
}
.test > * {
bottom: 0;
left: 50%;
top: auto;
right: auto;
position: absolute;
transform: translate(-50%, 0);
}
.test:nth-child(1n) {
clear: none;
float: left;
margin-right: 60px;
}
.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: {
    // set option for both align and column
    option: {
      flexbox: false
      gutter: 60px
    }
    align: {
      location: 'bottom-center'
    }
    column: {
      fraction: '1/4'
      cycle: '3'
    }
  }
})
.test {
  position: relative;
  width: calc(99.9% * 1 / 4 - (60px - 60px * 1 / 4));
}
.test > * {
  bottom: 0;
  left: 50%;
  top: auto;
  right: auto;
  position: absolute;
  transform: translate(-50%, 0);
}
.test:nth-child(1n) {
  clear: none;
  float: left;
  margin-right: 60px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
}
.test:nth-child(3n+1) {
  clear: left;
}
.test:
  grid:
    # set option for both align and column
    option:
      flexbox: false
      gutter: 60px
    align:
      location: bottom-center
    column:
      fraction: 1/4
      cycle: 3

Notes

Instance

Description: Options can be changed in a ctr instance through the root option Object.

Edit
ctr('.test', {
// set option for all grid features
option: {
grid: {
gutter: 60px
flexbox: false
}
}
size: 500px
// clearfix is need since we are not using flexbox
clearfix: true
grid: {
column: '1/1'
}
component-div: {
height: 100px
grid: {
column: '1/3'
}
}
})
.test:
# set option for all grid features
option:
grid:
gutter: 60px
flexbox: false
size: 500px
# clearfix is need since we are not using flexbox
clearfix: true
grid:
column: 1/1
component-div:
height: 100px
grid:
column: 1/3
.test {
width: 500px;
height: 500px;
}
.test > div {
height: 100px;
width: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
}
.test::after {
clear: both;
content: "";
display: table;
}
.test:nth-child(1n) {
clear: none;
float: left;
margin-right: 60px;
}
.test:last-child {
margin-right: 0;
}
.test:nth-child(1n+1) {
clear: left;
}
.test > div:nth-child(1n) {
clear: none;
float: left;
margin-right: 60px;
}
.test > div:last-child {
margin-right: 0;
}
.test > div:nth-child(3n) {
float: right;
margin-right: 0;
}
.test > div:nth-child(3n+1) {
clear: left;
}
ctr('.test', {
  // set option for all grid features
  option: {
    grid: {
      gutter: 60px
      flexbox: false
    }
  }
  size: 500px
  // clearfix is need since we are not using flexbox
  clearfix: true
  grid: {
    column: '1/1'
  }
  component-div: {
    height: 100px
    grid: {
      column: '1/3'
    }
  }
})
.test {
  width: 500px;
  height: 500px;
}
.test > div {
  height: 100px;
  width: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
}
.test::after {
  clear: both;
  content: "";
  display: table;
}
.test:nth-child(1n) {
  clear: none;
  float: left;
  margin-right: 60px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(1n+1) {
  clear: left;
}
.test > div:nth-child(1n) {
  clear: none;
  float: left;
  margin-right: 60px;
}
.test > div:last-child {
  margin-right: 0;
}
.test > div:nth-child(3n) {
  float: right;
  margin-right: 0;
}
.test > div:nth-child(3n+1) {
  clear: left;
}
.test:
  # set option for all grid features
  option:
    grid:
      gutter: 60px
      flexbox: false
  size: 500px
  # clearfix is need since we are not using flexbox
  clearfix: true
  grid:
    column: 1/1
  component-div:
    height: 100px
    grid:
      column: 1/3

Global

Description: Options can be changed globally through global options.

Edit
// set option globally
ctrSetOption({
grid: {
gutter: 60px
}
})
ctr('.test', {
size: 500px
grid: {
column: '1/1'
}
component-div: {
height: 100px
grid: {
column: '1/3'
}
}
})
# set option globally
ctr:::setOption:
grid:
gutter: 60px
'.test':
size: 500px
grid:
column: '1/1'
component-div:
height: 100px
grid:
column: '1/3'
.test {
width: 500px;
height: 500px;
flex: 0 0 auto;
}
.test > div {
height: 100px;
flex: 0 0 auto;
width: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
}
.test:last-child {
margin-right: 0;
}
.test:nth-child(1n) {
float: right;
margin-right: 0;
}
.test > div:nth-child(1n) {
margin-right: 60px;
}
.test > div:last-child {
margin-right: 0;
}
.test > div:nth-child(3n) {
float: right;
margin-right: 0;
}
// set option globally
ctrSetOption({
  grid: {
    gutter: 60px
  }
})

ctr('.test', {
  size: 500px
  grid: {
    column: '1/1'
  }
  component-div: {
    height: 100px
    grid: {
      column: '1/3'
    }
  }
})
.test {
  width: 500px;
  height: 500px;
  flex: 0 0 auto;
}
.test > div {
  height: 100px;
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(1n) {
  float: right;
  margin-right: 0;
}
.test > div:nth-child(1n) {
  margin-right: 60px;
}
.test > div:last-child {
  margin-right: 0;
}
.test > div:nth-child(3n) {
  float: right;
  margin-right: 0;
}
# set option globally
ctr:::setOption:
  grid:
    gutter: 60px

'.test':
  size: 500px
  grid:
    column: '1/1'
  component-div:
    height: 100px
    grid:
      column: '1/3'