Syntax¶

Description: offset is defined as a grid utility that alters the position of an element or elements left, right, up, or down through the margin-lef or margin-top property.

Arguments:

• <fraction> String | Number
  • Required argument
  • The amount the element shifts relative to its parent container
• <gutter> String | Literal
  • Default: 30px
  • Sets the gap between elements
  • A gutter of 0 equals no gutter at all
• <direction> String 'column' | 'row'
  • Default: 'row'
  • The type of grid that offset is being applied to

// longhand
ctr('<#selector>', {
  grid: {
    offset: {
      fraction: '<string>'
      direction: '<string>' | 'row'
      gutter: '<string>' | 30px
    }
  }
})

# longhand
<#selector>:
  grid:
    offset:
      fraction: <string>
      direction: <string> | row
      gutter: <string> | 30px

// shorthand
ctr('<#selector>', {
  grid: {
    offset: '<fraction>' '<direction>' '<gutter>'
  }
})

# shorthand
'<#selector>':
  grid:
    offset: [<fraction>, <direction>, <gutter>]

Notes

• You can use the default keyword to use the default value
• For the sake of brevity, I use the shorthand syntax for the examples
• Lost Offset

Left¶

Description: A positive offset value offsets the element to the left.

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

.test:
  grid:
    offset: 1/3

.test {
  margin-left: calc(99.9% * (-1 / 3 * -1) - (30px - 30px * (-1 / 3 * -1)) + 30px) !important;
}

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

.test {
  margin-left: calc(99.9% * (-1 / 3 * -1) - (30px - 30px * (-1 / 3 * -1)) + 30px) !important;
}

.test:
  grid:
    offset: 1/3

Right¶

Description: A negative offset value offsets the element to the right.

ctr('.test', {
  grid: {
    offset: '-1/3'
  }
})

.test:
  grid:
    offset: -1/3

.test {
  margin-left: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px) !important;
}

ctr('.test', {
  grid: {
    offset: '-1/3'
  }
})

.test {
  margin-left: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px) !important;
}

.test:
  grid:
    offset: -1/3

Up¶

Description: A negative offset value and a 'column'direction` value offsets the element up.

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

.test:
  grid:
    offset: [1/3, column]

.test {
  margin-bottom: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + (30px * 2)) !important;
}

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

.test {
  margin-bottom: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + (30px * 2)) !important;
}

.test:
  grid:
    offset: [1/3, column]

Down¶

Description: A positive offset value and a 'column' direction value offsets the element down.

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

.test:
  grid:
    offset: [-1/3, column]

.test {
  margin-top: calc(99.9% * (-1 / 3 * -1) - (30px - 30px * (-1 / 3 * -1)) + 30px) !important;
}

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

.test {
  margin-top: calc(99.9% * (-1 / 3 * -1) - (30px - 30px * (-1 / 3 * -1)) + 30px) !important;
}

.test:
  grid:
    offset: [-1/3, column]

Gutter¶

Description: The value for the gutter accounts for the gutter set on the column or row.

ctr('.test', {
  grid: {
    offset: '1/2' default '60px'
  }
})

.test:
  grid:
    offset: [1/2, default, 60px]

.test {
  margin-left: calc(99.9% * (-1 / 2 * -1) - (60px - 60px * (-1 / 2 * -1)) + 60px) !important;
}

ctr('.test', {
  grid: {
    offset: '1/2' default '60px'
  }
})

.test {
  margin-left: calc(99.9% * (-1 / 2 * -1) - (60px - 60px * (-1 / 2 * -1)) + 60px) !important;
}

.test:
  grid:
    offset: [1/2, default, 60px]

Notes

• Unfortunately, this value is not set automatically for you, but it will be in the future