---
title: Flex Grid
label: Grid
priority: 2
---

## Flex Grid

Noah flex grid uses negative margins in order to provide a simpler way of building layouts - without having to wrap each individual element of the grid in an extra column wrapper.

### Default

<ComponentDemo name="GridDefault" />

### Fluid

<ComponentDemo name="GridFluid" />

### Grid Columns

<ComponentDemo name="GridColumns" />

### Grid Gap

<ComponentDemo name="GridGap" />

### Align Top Left

<ComponentDemo name="GridTopLeft" />

### Align Top Center

<ComponentDemo name="GridTopCenter" />

### Align Top Right

<ComponentDemo name="GridTopRight" />

### Align Center Left

<ComponentDemo name="GridCenterLeft" />

### Align Center Center

<ComponentDemo name="GridCenterCenter" />

### Align Center Right

<ComponentDemo name="GridCenterRight" />

### Align Bottom Left

<ComponentDemo name="GridBottomLeft" />

### Align Bottom Center

<ComponentDemo name="GridBottomCenter" />

### Align Bottom Right

<ComponentDemo name="GridBottomRight" />

### Stretch Columns

<ComponentDemo name="GridStretch" />

### Stacks Column

<ComponentDemo name="GridStack" />