Syntax

Description: move is defined as a grid utility that alters the source ordering by shifting an element or elements left, right, up, or down through the left or top property.

Arguments:

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

Notes

Left

Description: A positive move value moves the element to the left.

Edit
ctr('.test', {
grid: {
move: '1/3'
}
})
.test:
grid:
move: 1/3
.test {
position: relative;
left: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + 30px);
}
ctr('.test', {
  grid: {
    move: '1/3'
  }
})
.test {
  position: relative;
  left: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + 30px);
}
.test:
  grid:
    move: 1/3

Right

Description: A negative move value moves the element to the right.

Edit
ctr('.test', {
grid: {
move: '-1/3'
}
})
.test:
grid:
move: -1/3
.test {
position: relative;
left: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px);
}
ctr('.test', {
  grid: {
    move: '-1/3'
  }
})
.test {
  position: relative;
  left: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px);
}
.test:
  grid:
    move: -1/3

Up

Description: A positve move value and a 'column' direction value moves the element up.

Edit
ctr('.test', {
grid: {
move: '1/3' 'column'
}
})
.test:
grid:
move: [1/3, column]
.test {
position: relative;
top: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + 30px);
}
ctr('.test', {
  grid: {
    move: '1/3' 'column'
  }
})
.test {
  position: relative;
  top: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + 30px);
}
.test:
  grid:
    move: [1/3, column]

Down

Description: A negative move value and a 'column' direction value moves the element down.

Edit
ctr('.test', {
grid: {
move: '-1/3' 'column'
}
})
.test:
grid:
move: [-1/3, column]
.test {
position: relative;
top: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px);
}
ctr('.test', {
  grid: {
    move: '-1/3' 'column'
  }
})
.test {
  position: relative;
  top: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px);
}
.test:
  grid:
    move: [-1/3, column]

Gutter

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

Edit
ctr('.test', {
grid: {
move: '1/2' default 60px
}
})
.test:
grid:
move: [1/2, default, 60px]
.test {
position: relative;
left: calc(99.9% * 1 / 2 - (60px - 60px * 1 / 2) + 60px);
}
ctr('.test', {
  grid: {
    move: '1/2' default 60px
  }
})
.test {
  position: relative;
  left: calc(99.9% * 1 / 2 - (60px - 60px * 1 / 2) + 60px);
}
.test:
  grid:
    move: [1/2, default, 60px]

Notes