Grid

Main container - va-layout

<div class="va-layout gutter--md">
   <div class="va-row">
     <div class="flex">
       Grid sizes
     </div>
   </div>
   <div class="va-row row wrap">
     <div class="flex xs12">
       <div class="_blue-rectangle">
            12
       </div>
     </div>
   </div
</div>

List of displays:

Prefix	Description
xs	Phones (<600px)
sm	Small devices Tablets (≥600px)
md	Medium devices Desktops (≥960)
lg	Large devices Desktops (≥1280px)
xl	Extra large devices Desktops (≥1920px)

va-layout can be used for a page oriented to the center, or considering that fluid prop expands its full width. va-row is used for partitioning and contains v-flex.

Gutters:

Class Name	Description
gutter--xs	Extra small gutter between cells
gutter--sm	Small gutter between cells
gutter--md	Default gutter between cells
gutter--lg	Large gutter between cells
gutter--xl	Extra large gutter between cells

va-layout controls by gutter, which can be:

• gutter--xs
• gutter--sm
• gutter--md
• gutter--lg

API:

align:

• align--start
• align--end
• align--center
• align--baseline

align-self:

• align-self--start
• align-self--end
• align-self--center
• align-self--baseline

align-content:

• align-content--start
• align-content--end
• align-content--center
• align-content--space-between
• align-content--space-around

justify:

• justify--start
• justify--end
• justify--center
• justify--space-around
• justify--space-between

justify-self:

• justify-self--start
• justify-self--end
• justify-self--center
• justify-self--baseline