Local¶

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

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

• The option Object is deep merged into each grid feature

Instance¶

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

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.

// 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'