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:

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

Left

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

Edit
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.

Edit
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.

Edit
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.

Edit
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.

Edit
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