Grid system
The Atlas Grid system is a fully responsive, robust, 12 column layout system with five default breakpoints. It’s fundamental to everything we design, and the geometric foundation of all high-level layouts.
How it works
Atlas’s grid system uses a series of containers, rows, and columns to layout content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
Live Editor
Result
Loading...
The above example creates three columns, where for resolutions starting on xs will span to 12 columns, and for resolutions stating on lg, will span to 4
Container
Container component provides a means to center and horizontally pad your site’s contents. By default container will take a fixed width of 1080px when min width of 1200px is reached
Props
| Name | Type | Default |
|---|---|---|
fluid Makes the container take the entire available width. |
| — |
noMargin Removes the margin from the container. |
| — |
children The content of the container. |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
| * - the prop is required. |
Row
Rows are wrappers for columns.
Props
| Name | Type | Default |
|---|---|---|
children The content of the row. |
| — |
spacing spacing is the gap between column in px |
| — |
defaultChecked |
| — |
defaultValue |
| — |
suppressContentEditableWarning |
| — |
suppressHydrationWarning |
| — |
accessKey |
| — |
className |
| — |
contentEditable |
| — |
contextMenu |
| — |
dir |
| — |
draggable |
| — |
hidden |
| — |
id |
| — |
lang |
| — |
placeholder |
| — |
slot |
| — |
spellCheck |
| — |
style |
| — |
tabIndex |
| — |
title |
| — |
translate |
| — |
radioGroup |
| — |
role |
| — |
about |
| — |
datatype |
| — |
inlist |
| — |
prefix |
| — |
property |
| — |
resource |
| — |
typeof |
| — |
vocab |
| — |
autoCapitalize |
| — |
autoCorrect |
| — |
autoSave |
| — |
color |
| — |
itemProp |
| — |
itemScope |
| — |
itemType |
| — |
itemID |
| — |
itemRef |
| — |
results |
| — |
security |
| — |
unselectable |
| — |
inputMode Hints at the type of data that might be entered by the user while editing the element or its contents
@see Link |
| — |
is Specify that a standard HTML element should behave like a defined custom built-in element
@see Link |
| — |
aria-activedescendant Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| — |
aria-atomic Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
| — |
aria-autocomplete Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
presented if they are made. |
| — |
aria-busy Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. |
| — |
aria-checked Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
@see aria-pressed
@see aria-selected. |
| — |
aria-colcount Defines the total number of columns in a table, grid, or treegrid.
@see aria-colindex. |
| — |
aria-colindex Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
@see aria-colcount
@see aria-colspan. |
| — |
aria-colspan Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
@see aria-colindex
@see aria-rowspan. |
| — |
aria-controls Identifies the element (or elements) whose contents or presence are controlled by the current element.
@see aria-owns. |
| — |
aria-current Indicates the element that represents the current item within a container or set of related elements. |
| — |
aria-describedby Identifies the element (or elements) that describes the object.
@see aria-labelledby |
| — |
aria-details Identifies the element that provides a detailed, extended description for the object.
@see aria-describedby. |
| — |
aria-disabled Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
@see aria-hidden
@see aria-readonly. |
| — |
aria-dropeffect Indicates what functions can be performed when a dragged object is released on the drop target.
@deprecated in ARIA 1.1 |
| — |
aria-errormessage Identifies the element that provides an error message for the object.
@see aria-invalid
@see aria-describedby. |
| — |
aria-expanded Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| — |
aria-flowto Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
allows assistive technology to override the general default of reading in document source order. |
| — |
aria-grabbed Indicates an element's "grabbed" state in a drag-and-drop operation.
@deprecated in ARIA 1.1 |
| — |
aria-haspopup Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| — |
aria-hidden Indicates whether the element is exposed to an accessibility API.
@see aria-disabled. |
| — |
aria-invalid Indicates the entered value does not conform to the format expected by the application.
@see aria-errormessage. |
| — |
aria-keyshortcuts Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| — |
aria-label Defines a string value that labels the current element.
@see aria-labelledby. |
| — |
aria-labelledby Identifies the element (or elements) that labels the current element.
@see aria-describedby. |
| — |
aria-level Defines the hierarchical level of an element within a structure. |
| — |
aria-live Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
| — |
aria-modal Indicates whether an element is modal when displayed. |
| — |
aria-multiline Indicates whether a text box accepts multiple lines of input or only a single line. |
| — |
aria-multiselectable Indicates that the user may select more than one item from the current selectable descendants. |
| — |
aria-orientation Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
| — |
aria-owns Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
@see aria-controls. |
| — |
aria-placeholder Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
A hint could be a sample value or a brief description of the expected format. |
| — |
aria-posinset Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
@see aria-setsize. |
| — |
aria-pressed Indicates the current "pressed" state of toggle buttons.
@see aria-checked
@see aria-selected. |
| — |
aria-readonly Indicates that the element is not editable, but is otherwise operable.
@see aria-disabled. |
| — |
aria-relevant Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
@see aria-atomic. |
| — |
aria-required Indicates that user input is required on the element before a form may be submitted. |
| — |
aria-roledescription Defines a human-readable, author-localized description for the role of an element. |
| — |
aria-rowcount Defines the total number of rows in a table, grid, or treegrid.
@see aria-rowindex. |
| — |
aria-rowindex Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
@see aria-rowcount
@see aria-rowspan. |
| — |
aria-rowspan Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
@see aria-rowindex
@see aria-colspan. |
| — |
aria-selected Indicates the current "selected" state of various widgets.
@see aria-checked
@see aria-pressed. |
| — |
aria-setsize Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
@see aria-posinset. |
| — |
aria-sort Indicates if items in a table or grid are sorted in ascending or descending order. |
| — |
aria-valuemax Defines the maximum allowed value for a range widget. |
| — |
aria-valuemin Defines the minimum allowed value for a range widget. |
| — |
aria-valuenow Defines the current value for a range widget.
@see aria-valuetext. |
| — |
aria-valuetext Defines the human readable text alternative of aria-valuenow for a range widget. |
| — |
dangerouslySetInnerHTML |
| — |
onCopy |
| — |
onCopyCapture |
| — |
onCut |
| — |
onCutCapture |
| — |
onPaste |
| — |
onPasteCapture |
| — |
onCompositionEnd |
| — |
onCompositionEndCapture |
| — |
onCompositionStart |
| — |
onCompositionStartCapture |
| — |
onCompositionUpdate |
| — |
onCompositionUpdateCapture |
| — |
onFocus |
| — |
onFocusCapture |
| — |
onBlur |
| — |
onBlurCapture |
| — |
onChange |
| — |
onChangeCapture |
| — |
onBeforeInput |
| — |
onBeforeInputCapture |
| — |
onInput |
| — |
onInputCapture |
| — |
onReset |
| — |
onResetCapture |
| — |
onSubmit |
| — |
onSubmitCapture |
| — |
onInvalid |
| — |
onInvalidCapture |
| — |
onLoad |
| — |
onLoadCapture |
| — |
onError |
| — |
onErrorCapture |
| — |
onKeyDown |
| — |
onKeyDownCapture |
| — |
onKeyPress |
| — |
onKeyPressCapture |
| — |
onKeyUp |
| — |
onKeyUpCapture |
| — |
onAbort |
| — |
onAbortCapture |
| — |
onCanPlay |
| — |
onCanPlayCapture |
| — |
onCanPlayThrough |
| — |
onCanPlayThroughCapture |
| — |
onDurationChange |
| — |
onDurationChangeCapture |
| — |
onEmptied |
| — |
onEmptiedCapture |
| — |
onEncrypted |
| — |
onEncryptedCapture |
| — |
onEnded |
| — |
onEndedCapture |
| — |
onLoadedData |
| — |
onLoadedDataCapture |
| — |
onLoadedMetadata |
| — |
onLoadedMetadataCapture |
| — |
onLoadStart |
| — |
onLoadStartCapture |
| — |
onPause |
| — |
onPauseCapture |
| — |
onPlay |
| — |
onPlayCapture |
| — |
onPlaying |
| — |
onPlayingCapture |
| — |
onProgress |
| — |
onProgressCapture |
| — |
onRateChange |
| — |
onRateChangeCapture |
| — |
onSeeked |
| — |
onSeekedCapture |
| — |
onSeeking |
| — |
onSeekingCapture |
| — |
onStalled |
| — |
onStalledCapture |
| — |
onSuspend |
| — |
onSuspendCapture |
| — |
onTimeUpdate |
| — |
onTimeUpdateCapture |
| — |
onVolumeChange |
| — |
onVolumeChangeCapture |
| — |
onWaiting |
| — |
onWaitingCapture |
| — |
onAuxClick |
| — |
onAuxClickCapture |
| — |
onClick |
| — |
onClickCapture |
| — |
onContextMenu |
| — |
onContextMenuCapture |
| — |
onDoubleClick |
| — |
onDoubleClickCapture |
| — |
onDrag |
| — |
onDragCapture |
| — |
onDragEnd |
| — |
onDragEndCapture |
| — |
onDragEnter |
| — |
onDragEnterCapture |
| — |
onDragExit |
| — |
onDragExitCapture |
| — |
onDragLeave |
| — |
onDragLeaveCapture |
| — |
onDragOver |
| — |
onDragOverCapture |
| — |
onDragStart |
| — |
onDragStartCapture |
| — |
onDrop |
| — |
onDropCapture |
| — |
onMouseDown |
| — |
onMouseDownCapture |
| — |
onMouseEnter |
| — |
onMouseLeave |
| — |
onMouseMove |
| — |
onMouseMoveCapture |
| — |
onMouseOut |
| — |
onMouseOutCapture |
| — |
onMouseOver |
| — |
onMouseOverCapture |
| — |
onMouseUp |
| — |
onMouseUpCapture |
| — |
onSelect |
| — |
onSelectCapture |
| — |
onTouchCancel |
| — |
onTouchCancelCapture |
| — |
onTouchEnd |
| — |
onTouchEndCapture |
| — |
onTouchMove |
| — |
onTouchMoveCapture |
| — |
onTouchStart |
| — |
onTouchStartCapture |
| — |
onPointerDown |
| — |
onPointerDownCapture |
| — |
onPointerMove |
| — |
onPointerMoveCapture |
| — |
onPointerUp |
| — |
onPointerUpCapture |
| — |
onPointerCancel |
| — |
onPointerCancelCapture |
| — |
onPointerEnter |
| — |
onPointerEnterCapture |
| — |
onPointerLeave |
| — |
onPointerLeaveCapture |
| — |
onPointerOver |
| — |
onPointerOverCapture |
| — |
onPointerOut |
| — |
onPointerOutCapture |
| — |
onGotPointerCapture |
| — |
onGotPointerCaptureCapture |
| — |
onLostPointerCapture |
| — |
onLostPointerCaptureCapture |
| — |
onScroll |
| — |
onScrollCapture |
| — |
onWheel |
| — |
onWheelCapture |
| — |
onAnimationStart |
| — |
onAnimationStartCapture |
| — |
onAnimationEnd |
| — |
onAnimationEndCapture |
| — |
onAnimationIteration |
| — |
onAnimationIterationCapture |
| — |
onTransitionEnd |
| — |
onTransitionEndCapture |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
| * - the prop is required. |
Column
- In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
- Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
- Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
- Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., sm={6} applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
- if you don't pass any breakpoint the column will take equal space on every resolution
Setting different breakpoints for columns
Live Editor
Result
Loading...
In the example above you can see we are just passing props for extra small and large resolutions. This setup will end up in the following:
- For extra small, small and medium resolutions, the column will expand up to 12 Columns.
- For large and extra large resolutions, the column will expand up to 6 columns.
Equal width Columns
If you don't specify any breakpoint prop, the column will take all the available space. If you have multiple columns, they will have the same width
Live Editor
Result
Loading...
Nested Grid
You can also create nested grids and have 12 columns inside a column. It is recommended not to have more than 3 levels of nested grids.
Live Editor
Result
Loading...
Props
| Name | Type | Default |
|---|---|---|
children The content of the column. |
| — |
xs Number of columns to span on extra small resolutions. |
| — |
sm Number of columns to span on small resolutions. |
| — |
md Number of columns to span on medium resolutions. |
| — |
lg Number of columns to span on large resolutions. |
| — |
xl Number of columns to span on extra large resolutions. |
| — |
spacing spacing is the gap between column in px |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
| * - the prop is required. |