Syntax¶

Description: align is defined as a grid alignment utility that is set on the parent element and applied to the nested child element or elements.

Arguments:

• <location> String
  • Required argument
  • Sets the position of the nested child element or elements relative to the parent element on which it is set
  • Shortlist: reset|horizontal|vertical|top-left|top-center|top|top-right|middle-left|left|middle-center|center|middle-right|right|bottom-left|bottom-center|bottom|bottom-right
• <flex> Boolean
  • Default: true
  • If align should use flexbox

Example

// longhand
ctr('<#selector>', {
  grid: {
    align: {
      location: '<string>'
      flex: <boolean> | true
    }
  }
})

# longhand
<#selector>:
  grid:
    align:
      location: <string>
      flex: <boolean> | true

// shorthand
ctr('<#selector>', {
  grid: {
    align: '<location>' '<flex>'
  }
})

# shorthand
<#selector>:
  grid:
    align: [<location>, <flex>]

Notes

• If you wish to align the element in and of itself, check out the align self helper
• Both flex and non-flex examples should yield the same display results
• For the sake of brevity, I use the shorthand syntax for the examples
• Lost Align

Bottom Center¶

Description: The value of 'bottom-center' centers the elements horizontally at the bottom of the parent element.

// flex
ctr('.test', {
  grid: {
    align: 'bottom-center'
  }
})

# flex
.test:
  grid:
    align: bottom-center

.test {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

// flex
ctr('.test', {
  grid: {
    align: 'bottom-center'
  }
})

.test {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

# flex
.test:
  grid:
    align: bottom-center

// non-flex
ctr('.test', {
  grid: {
    align: 'bottom-center' false
  }
})

# non-flex
.test:
  grid:
    align: [bottom-center, false]

.test {
  position: relative;
}
.test > * {
  bottom: 0;
  left: 50%;
  top: auto;
  right: auto;
  position: absolute;
  transform: translate(-50%, 0);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'bottom-center' false
  }
})

.test {
  position: relative;
}
.test > * {
  bottom: 0;
  left: 50%;
  top: auto;
  right: auto;
  position: absolute;
  transform: translate(-50%, 0);
}

# non-flex
.test:
  grid:
    align: [bottom-center, false]

Notes

• 'bottom-center' alias: 'bottom' 'bc'

Bottom Left¶

Description: The value of 'bottom-left' aligns the elements at the bottom left corner of the parent element.

// flex
ctr('.test', {
  grid: {
    align: 'bottom-left'
  }
})

# flex
.test:
  grid:
    align: bottom-left

.test {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

// flex
ctr('.test', {
  grid: {
    align: 'bottom-left'
  }
})

.test {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

# flex
.test:
  grid:
    align: bottom-left

// non-flex
ctr('.test', {
  grid: {
    align: 'bottom-left' false
  }
})

# non-flex
.test:
  grid:
    align: [bottom-left, false]

.test {
  position: relative;
}
.test > * {
  left: 0;
  bottom: 0;
  top: auto;
  right: auto;
  position: absolute;
  transform: translate(-50%, 0);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'bottom-left' false
  }
})

.test {
  position: relative;
}
.test > * {
  left: 0;
  bottom: 0;
  top: auto;
  right: auto;
  position: absolute;
  transform: translate(-50%, 0);
}

# non-flex
.test:
  grid:
    align: [bottom-left, false]

Notes

• 'bottom-left' alias: 'bl'

Bottom Right¶

Description: The value of 'bottom-right' aligns the elements at the bottom right corner of the parent element.

// flex
ctr('.test', {
  grid: {
    align: 'bottom-right'
  }
})

# flex
.test:
  grid:
    align: bottom-right

.test {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

// flex
ctr('.test', {
  grid: {
    align: 'bottom-right'
  }
})

.test {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

# flex
.test:
  grid:
    align: bottom-right

// non-flex
ctr('.test', {
  grid: {
    align: 'bottom-right' false
  }
})

# non-flex
.test:
  grid:
    align: [bottom-right, false]

.test {
  position: relative;
}
.test > * {
  right: 0;
  bottom: 0;
  top: auto;
  left: auto;
  position: absolute;
  transform: translate(0, 0);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'bottom-right' false
  }
})

.test {
  position: relative;
}
.test > * {
  right: 0;
  bottom: 0;
  top: auto;
  left: auto;
  position: absolute;
  transform: translate(0, 0);
}

# non-flex
.test:
  grid:
    align: [bottom-right, false]

Notes

• 'bottom-right' alias: 'br'

Center¶

Description: The value of 'center' centers the elements both vertically and horizontally.

// flex
ctr('.test', {
  grid: {
    align: 'center'
  }
})

# flex
.test:
  grid:
    align: center

.test {
  display: flex;
  align-items: center;
  justify-content: center;
}

// flex
ctr('.test', {
  grid: {
    align: 'center'
  }
})

.test {
  display: flex;
  align-items: center;
  justify-content: center;
}

# flex
.test:
  grid:
    align: center

// non-flex
ctr('.test', {
  grid: {
    align: 'center' false
  }
})

# non-flex
.test:
  grid:
    align: [center, false]

.test {
  position: relative;
}
.test > * {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(-50%, -50%);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'center' false
  }
})

.test {
  position: relative;
}
.test > * {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(-50%, -50%);
}

# non-flex
.test:
  grid:
    align: [center, false]

Notes

• 'center' alias: 'center-middle' 'cm' true

Center Left¶

Description: The value of 'center-left' centers the elements vertically at the left side of the parent element.

// flex
ctr('.test', {
  grid: {
    align: 'center-left'
  }
})

# flex
.test:
  grid:
    align: center-left

.test {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

// flex
ctr('.test', {
  grid: {
    align: 'center-left'
  }
})

.test {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

# flex
.test:
  grid:
    align: center-left

// non-flex
ctr('.test', {
  grid: {
    align: 'center-left' false
  }
})

# non-flex
.test:
  grid:
    align: [center-left, false]

.test {
  position: relative;
}
.test > * {
  left: 0;
  top: 50%;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, -50%);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'center-left' false
  }
})

.test {
  position: relative;
}
.test > * {
  left: 0;
  top: 50%;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, -50%);
}

# non-flex
.test:
  grid:
    align: [center-left, false]

Notes

• 'center-left' alias: 'cl' 'left'

Center Right¶

Description: The value of 'center-right' centers the elements vertically at the right side of the parent element.

// flex
ctr('.test', {
  grid: {
    align: 'center-right'
  }
})

# flex
.test:
  grid:
    align: center-right

.test {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

// flex
ctr('.test', {
  grid: {
    align: 'center-right'
  }
})

.test {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

# flex
.test:
  grid:
    align: center-right

// non-flex
ctr('.test', {
  grid: {
    align: 'center-right' false
  }
})

# non-flex
.test:
  grid:
    align: [center-right, false]

.test {
  position: relative;
}
.test > * {
  right: 0;
  top: 50%;
  left: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, -50%);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'center-right' false
  }
})

.test {
  position: relative;
}
.test > * {
  right: 0;
  top: 50%;
  left: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, -50%);
}

# non-flex
.test:
  grid:
    align: [center-right, false]

Notes

• 'center-right' alias: 'cr' 'right'

Top Center¶

Description: The value of 'top-center' centers the elements horizontally at the top of the parent element.

// flex
ctr('.test', {
  grid: {
    align: 'top-center'
  }
})

# flex
.test:
  grid:
    align: top-center

.test {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

// flex
ctr('.test', {
  grid: {
    align: 'top-center'
  }
})

.test {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

# flex
.test:
  grid:
    align: top-center

// non-flex
ctr('.test', {
  grid: {
    align: 'top-center' false
  }
})

# non-flex
.test:
  grid:
    align: [top-center, false]

.test {
  position: relative;
}
.test > * {
  top: 0;
  left: 50%;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(-50%, 0);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'top-center' false
  }
})

.test {
  position: relative;
}
.test > * {
  top: 0;
  left: 50%;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(-50%, 0);
}

# non-flex
.test:
  grid:
    align: [top-center, false]

Notes

• 'top-center' alias: tc

Top Left¶

Description: The value of 'top-left' aligns the elements at the top left corner of the parent element.

// flex
ctr('.test', {
  grid: {
    align: 'top-left'
  }
})

# flex
.test:
  grid:
    align: top-left

.test {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

// flex
ctr('.test', {
  grid: {
    align: 'top-left'
  }
})

.test {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

# flex
.test:
  grid:
    align: top-left

// non-flex
ctr('.test', {
  grid: {
    align: 'top-left' false
  }
})

# non-flex
.test:
  grid:
    align: [top-left, false]

.test {
  position: relative;
}
.test > * {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, 0);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'top-left' false
  }
})

.test {
  position: relative;
}
.test > * {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, 0);
}

# non-flex
.test:
  grid:
    align: [top-left, false]

Notes

• 'top-left' alias: 'tl'

Top Right¶

Description: The value of 'top-right' aligns the elements at the top right corner of the parent element.

// flex
ctr('.test', {
  grid: {
    align: 'top-right'
  }
})

# flex
.test:
  grid:
    align: top-right

.test {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

// flex
ctr('.test', {
  grid: {
    align: 'top-right'
  }
})

.test {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

# flex
.test:
  grid:
    align: top-right

// non-flex
ctr('.test', {
  grid: {
    align: 'top-right' false
  }
})

# non-flex
.test:
  grid:
    align: [top-right, false]

.test {
  position: relative;
}
.test > * {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, 0);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'top-right' false
  }
})

.test {
  position: relative;
}
.test > * {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, 0);
}

# non-flex
.test:
  grid:
    align: [top-right, false]

Notes

• 'top-right' alias: 'tr'

Horizontal¶

Description: The value of 'horizontal' centers the elements horizontally.

// flex
ctr('.test', {
  grid: {
    align: 'horizontal'
  }
})

# flex
.test:
  grid:
    align: horizontal

.test {
  display: flex;
  align-items: inherit;
  justify-content: center;
}

// flex
ctr('.test', {
  grid: {
    align: 'horizontal'
  }
})

.test {
  display: flex;
  align-items: inherit;
  justify-content: center;
}

# flex
.test:
  grid:
    align: horizontal

// non-flex
ctr('.test', {
  grid: {
    align: 'horizontal' false
  }
})

# non-flex
.test:
  grid:
    align: [horizontal, false]

.test {
  position: relative;
}
.test > * {
  left: 50%;
  top: auto;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(-50%, 0);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'horizontal' false
  }
})

.test {
  position: relative;
}
.test > * {
  left: 50%;
  top: auto;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(-50%, 0);
}

# non-flex
.test:
  grid:
    align: [horizontal, false]

Notes

• 'horizontal' alias: 'hr'

Vertical¶

Description: The value of 'vertical' centers the elements vertically.

// flex
ctr('.test', {
  grid: {
    align: 'vertical'
  }
})

# flex
.test:
  grid:
    align: vertical

.test {
  display: flex;
  align-items: center;
  justify-content: inherit;
}

// flex
ctr('.test', {
  grid: {
    align: 'vertical'
  }
})

.test {
  display: flex;
  align-items: center;
  justify-content: inherit;
}

# flex
.test:
  grid:
    align: vertical

// non-flex
ctr('.test', {
  grid: {
    align: 'vertical' false
  }
})

# non-flex
.test:
  grid:
    align: [vertical, false]

.test {
  position: relative;
}
.test > * {
  top: 50%;
  left: auto;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, -50%);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'vertical' false
  }
})

.test {
  position: relative;
}
.test > * {
  top: 50%;
  left: auto;
  right: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, -50%);
}

# non-flex
.test:
  grid:
    align: [vertical, false]

Notes

• 'vertical' alias: 'vr'

Reset¶

Description: The value of 'reset' resets the alignment.

// flex
ctr('.test', {
  grid: {
    align: 'reset'
  }
})

# flex
.test:
  grid:
    align: reset

.test {
  display: initial;
  align-items: inherit;
  justify-content: inherit;
}

// flex
ctr('.test', {
  grid: {
    align: 'reset'
  }
})

.test {
  display: initial;
  align-items: inherit;
  justify-content: inherit;
}

# flex
.test:
  grid:
    align: reset

// non-flex
ctr('.test', {
  grid: {
    align: 'reset' false
  }
})

# non-flex
.test:
  grid:
    align: [reset, false]

.test {
  position: static;
}
.test > * {
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  position: static;
  transform: translate(0, 0);
}

// non-flex
ctr('.test', {
  grid: {
    align: 'reset' false
  }
})

.test {
  position: static;
}
.test > * {
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  position: static;
  transform: translate(0, 0);
}

# non-flex
.test:
  grid:
    align: [reset, false]

Notes

• 'reset' alias: false