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:

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

Bottom Center

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Bottom Left

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Bottom Right

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Center

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Center Left

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Center Right

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Top Center

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Top Left

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Top Right

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Horizontal

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Vertical

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

Edit
// 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
Edit
// 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]
Child
Child
Child

Notes

Reset

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

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