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:

va-layout controls by gutter, which can be:

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

      <div class="va-row">
        <div class="flex">
          Grid sizes
        </div>
      </div>
 </div>```

# 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`**