Prop aliases

Prop alias is a prop name shorthand that compiles into plain CSS property(-ies).
Atomic layout uses this feature for convenience and development speed. These props can be assigned to any component exposed by the library, including the area components generated from your composition template strings.
Values of prop aliases can be applied conditionally. Read about Responsive props.
Each prop alias is associated with a single, or multiple corresponding CSS properties. See the list of all aliases and their CSS properties in the tables below.
Grid
Prop name
CSS property
areas
​grid-template-areas​
template
​grid-template-areas​
templateCols
​grid-template-columns​
templateRows
​grid-template-rows​
gap
​grid-gap​
gapCol
​grid-column-gap​
gapRow
​grid-row-gap​
col
​grid-column​
colStart
​grid-column-start​
colEnd
​grid-column-end​
row
​grid-row​
rowStart
​grid-row-start​
rowEnd
​grid-row-end​
autoRows
​grid-auto-rows​
autoCols
​grid-auto-columns​
autoFlow
​grid-auto-flow​
Alignment
Prop name
CSS property
flexDirection
​flex-direction​
flexShrink
​flex-shrink​
flexGrow
​flex-grow​
flexWrap
​flex-wrap​
align
​align-self​
alignItems
​align-items​
alignContent
​align-content​
justify
​justify-self​
justifyItems
​justify-items​
justifyContent
​justify-content​
place
place
placeItems
​place-items​
placeContent
​place-content​
Dimensions
Prop name
CSS property
minHeight
min-height
maxHeight
max-height
height
height
minWidth
min-width
maxWidth
max-width
width
width
Spacing
Prop name
CSS property
margin
margin
marginVertical
margin-top and margin-bottom
marginHorizontal
margin-right and margin-left
marginTop
margin-top
marginRight
margin-right
marginBottom
margin-bottom
marginLeft
margin-left
padding
padding
paddingVertical
padding-top and padding-bottom
paddingHorizontal
padding-right and padding-left
paddingTop
padding-top
paddingRight
padding-right
paddingBottom
padding-bottom
paddingLeft
padding-left

Fundamentals - Previous

Breakpoints

Next - Fundamentals

Responsive props

Last updated 15 days ago

Prop name	CSS property
`areas`	`grid-template-areas`
`template`	~~`grid-template-areas`~~
`templateCols`	`grid-template-columns`
`templateRows`	`grid-template-rows`
`gap`	`grid-gap`
`gapCol`	`grid-column-gap`
`gapRow`	`grid-row-gap`
`col`	`grid-column`
`colStart`	`grid-column-start`
`colEnd`	`grid-column-end`
`row`	`grid-row`
`rowStart`	`grid-row-start`
`rowEnd`	`grid-row-end`
`autoRows`	`grid-auto-rows`
`autoCols`	`grid-auto-columns`
`autoFlow`	`grid-auto-flow`

Prop name	CSS property
`flexDirection`	`flex-direction`
`flexShrink`	`flex-shrink`
`flexGrow`	`flex-grow`
`flexWrap`	`flex-wrap`
`align`	`align-self`
`alignItems`	`align-items`
`alignContent`	`align-content`
`justify`	`justify-self`
`justifyItems`	`justify-items`
`justifyContent`	`justify-content`
`place`	`place`
`placeItems`	`place-items`
`placeContent`	`place-content`

Prop name	CSS property
`minHeight`	`min-height`
`maxHeight`	`max-height`
`height`	`height`
`minWidth`	`min-width`
`maxWidth`	`max-width`
`width`	`width`

Prop name	CSS property
`margin`	`margin`
`marginVertical`	`margin-top` and `margin-bottom`
`marginHorizontal`	`margin-right` and `margin-left`
`marginTop`	`margin-top`
`marginRight`	`margin-right`
`marginBottom`	`margin-bottom`
`marginLeft`	`margin-left`
`padding`	`padding`
`paddingVertical`	`padding-top` and `padding-bottom`
`paddingHorizontal`	`padding-right` and `padding-left`
`paddingTop`	`padding-top`
`paddingRight`	`padding-right`
`paddingBottom`	`padding-bottom`
`paddingLeft`	`padding-left`