Our grid system ensures consistency by aligning all elements properly and maintaining a consistent balance for the layout. A grid facilitates a responsive layout that adapts easily to different screen sizes and devices.
Layout elements
Column
We use a 12-column grid to divide blocks or elements evenly. The layout and its content are segmented responsively at predefined breakpoints.
Margin
Our margins are inherited from our spacing tokens.
Gutter
Gutters are the spaces between columns in the grid that help separate content and balance the whitespace of the layout.
Gutter modes
Wide (32px)
Wide gutters the default gutter, provide more space between columns giving the layout a more spacious feel.
Narrow (16px)
Narrow gutters reduce the space between columns, by keeping elements left-aligned, allowing more content to fit within the same area.
Condensed (2px)
Condensed gutters are even narrower than narrow ones, often used in compact layouts is need to be limited.
Full width
Full-width gutters eliminate the space between columns, allowing content to span the entire container width.
Responsiveness
Breakpoints
Responsive behavior
Responsive behavior is only applicable to the components on the interface within the standards of our web dashboard. Currently, the margin values change at breakpoint transitions, but the gutter values remain the same.
Layout grid customization
Our flex grid system can be customized based on design requirements, particularly for data tables and lists. Columns are adjustable both horizontally and vertically.
Adjust dynamic column
Our grid system is based on a flexible 12-column structure by default, allowing for a wide range of layout possibilities. It can be customize up to a maximum of a 24-column grid to accommodate more complex needs or specific layout requirements.
<div class="fds-grid-container">
<div class="fds-row fds-row--5">
<div class="fds-col-span-1"><div class="inside">1/5</div></div>
<div class="fds-col-span-3"><div class="inside">3/5</div></div>
<div class="fds-col-span-1"><div class="inside">1/5</div></div>
</div>
<div class="fds-row fds-row--10">
<div class="fds-col-span-2"><div class="inside">2/10</div></div>
<div class="fds-col-span-1"><div class="inside">1/10</div></div>
<div class="fds-col-span-3"><div class="inside">3/10</div></div>
<div class="fds-col-span-4"><div class="inside">2/10</div></div>
</div>
</div>
Include vertical padding
Adjust vertical padding to create balanced space above and below columns. This can be done for all columns in a row or individually for each column.
<div class="demo-vertical">
<div class="fds-grid-container" style={{width: '100%'}}>
<div class="fds-row fds-row-padding">
<div class="fds-col-span-3"><div class="inside">1/4</div></div>
<div class="fds-col-span-3"><div class="inside">2/4</div></div>
<div class="fds-col-span-3"><div class="inside">3/4</div></div>
<div class="fds-col-span-3"><div class="inside">4/4</div></div>
</div>
</div>
<div class="fds-grid-container" style={{width: '100%'}}>
<div class="fds-row">
<div class="fds-col-span-3 fds-col-padding"><div class="inside">1/4</div></div>
<div class="fds-col-span-3 fds-col-padding"><div class="inside">2/4</div></div>
<div class="fds-col-span-3 fds-col-padding"><div class="inside">3/4</div></div>
<div class="fds-col-span-3 fds-col-padding"><div class="inside">4/4</div></div>
</div>
</div>
</div>
Setting column gutter
In our grid system, you can remove the gutter space for an entire row, making all columns fit tightly together. It can also adjust gutters on individual columns, or even remove the gutter from just one side of a column, allowing for precise control over spacing.
<div class="demo-vertical">
<div class="fds-grid-container" style={{width: '100%'}}>
<div class="fds-row fds-no-gutter">
<div class="fds-col-span-3"><div class="inside">1/4</div></div>
<div class="fds-col-span-3"><div class="inside">2/4</div></div>
<div class="fds-col-span-3"><div class="inside">3/4</div></div>
<div class="fds-col-span-3"><div class="inside">4/4</div></div>
</div>
</div>
<div class="fds-grid-container" style={{width: '100%'}}>
<div class="fds-row">
<div class="fds-col-span-3"><div class="inside">1/4</div></div>
<div class="fds-col-span-3 fds-no-gutter"><div class="inside">2/4</div></div>
<div class="fds-col-span-3 fds-no-gutter"><div class="inside">3/4</div></div>
<div class="fds-col-span-3"><div class="inside">4/4</div></div>
</div>
</div>
<div class="fds-grid-container" style={{width: '100%'}}>
<div class="fds-row">
<div class="fds-col-span-3 fds-no-gutter--start"><div class="inside">No gutter left side</div></div>
<div class="fds-col-span-3"><div class="inside">2/4</div></div>
<div class="fds-col-span-3 fds-no-gutter--end"><div class="inside">No gutter right side</div></div>
<div class="fds-col-span-3"><div class="inside">4/4</div></div>
</div>
</div>
</div>
Layout regions
- App header
- Navigation (global)
- Container
- Footer
Using layout grid
Design
When designing, predefined grids can be used to apply the design according to the grid layout of a body or container.
To use a container within a specific grid layout or breakpoint, you can use one of the containers under grid styles.
However, if you are designing the area of a component or group at a more micro level according to the layout size, you can use the gutters & columns styles.
You can turn on/off the grid styles shift+g keys on Figma.