Flex

Nord UI offers a 12 columns grid system based on CSS Flexbox. It's easy to use and helps building complex responsive layouts quickly with minimum effort.

Just Like other grid systems, this one is also made up of two parts: rows and columns.

Also utilities such as Alignment, Visibility and Gutter classes are available to make grids in any sizes and shapes.

Import Path

Import following style(s) to include flex, alignment, visibility and gutter styles in your app.

• Base: nord-ui/dist/flex.css
• Dark Theme: none

Screen Sizes and Breakpoints

We support five screen sizes including:

• xs: for extra small screens like mobile screens, up to 599px
• sm: for smaller screens like small tablets, starting at 600px
• md: for medium screens like tablets, starting at 960px
• lg: for large screens like laptop and desktop monitors, starting at 1280px
• xl: for extra large screens, starting at 1920px

Each one supports its own and larger ranges. for example, md can affect lg range and xl range if their classes has not being used.

Row

Row acts as a container for columns and holds them together. this element has display: flex and will fill its container width.

Rows also can be placed inside columns.

To create a row, simply add .row element class to a <div> tag.

<div class="row">A Simple Row</div>
copy

Column

Column is the core component to make responsive layouts. use them inside a row.

To make a column, add .col element class to a <div> tag.

<div class="row">
    <div class="col">A Column with variable width</div>
    <div class="col">Another One</div>
</div>
copy

By default, columns width computed based on their content width. but you can set their size also.

Equal Width

Columns can share width equally with each others. if there is a single column, then it'll fill the parent element's width.

Use .auto modifier class on <div class='col'> to share width among columns:

<div class="row">
    <div class="col auto">auto on md and up</div>
    <div class="col auto">auto on md and up</div>
    <div class="col auto">auto on md and up</div>
</div>
copy

You can define equal width only on some screen sizes. use .[size]-auto where, size is one of screen sizes.

For example .lg-auto will shares width equally only on large screens.

<div class="row">
    <div class="col lg-auto">auto on lg and up</div>
    <div class="col lg-auto">auto on lg and up</div>
</div>
copy

Size

To set column size for any screen size, use .[size]-[col] format, where size is one of screen sizes and col is a number between 1 and 12.

For example, to make a column fill 50% width of its row on lg, we use .lg-6.

<div class="row">
    <div class="col xs-6">6 of 6</div>
</div>
copy

Use xs size to apply on all screen size.

<div class="row">
    <div class="col xs-12">This column has full width on all screen sizes</div>
    <div class="col xs-12 md-6">This column has full width on small down and half width on medium up</div>
</div>
copy

Define all screen sizes for a single column:

<div class="row">
    <div class="col xs-9 sm-12 md-6 lg-4 xl-3">col xs-9 sm-12 md-6 lg-4 xl-3</div>
</div>
copy

Mix screen sizes to build more complex grids:

<div class="row">
    <div class="col xs-8 md-6 lg-4">xs-8 md-6 lg-4</div>
    <div class="col xs-4 md-6 lg-8">xs-4 md-6 lg-8</div>
    <div class="col xs-3 lg-8">xs-3 lg-8</div>
    <div class="col xs-4 lg-10">xs-4 lg-10</div>
    <div class="col xs-5 lg-12">xs-5 lg-12</div>
    <div class="col xs-4 lg-3">xs-4 lg-3</div>
    <div class="col xs-4 lg-6">xs-4 lg-6</div>
    <div class="col xs-4 lg-3">xs-4 lg-3</div>
</div>
copy