import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
import hbs from 'htmlbars-inline-precompile';

<Meta title="Foundations/Grid" />



# Grid

The Radial grid is responsive and adapts to different screen sizes. We use specific grids and spacing to keep consistent around the site.

Radial is currently using an 8px grid as its unit of measurement. These 8px increments should be adhered to when building out components and should be the scale used when going up or down on a component’s size.

The grid is made up of three elements: columns, gutters, and margins. The number and size of columns, gutters, and margins in a grid changes based on the users’ viewport.

  
  

### Types of Grids

* **Hard/Fixed Grid:** This involves placing objects on a fixed grid with 8-point increments. The number of columns change based on the viewport width.
* **Soft Grid:** This involves placing objects at distances from each other that are divisible by 8. This would involve applying a Row and/or Column Layout Grid with properties divisible by 8.
* **Layout Grid:** This type of grid involves specifying a grid of mostly columns only for use in atoms or molecules. This layout grid doesnt align with the Hard/Fixed Grid.

  

### Breakpoints

Our Hard/Fixed Grids change based on breakpoints. Our most commonly used breakpoints are listed below:

| Name | Breakpoint | Columns | Gutter |
|--|--|--|--|
| $xsmall | 360px | 8 col | 16px |
| $small | 550px | 8 col | 16px |
| $medium | 786px | 8 col | 16px |
| $large | 850px | 16 col | 16px |
| $xlarge | 1024px | 16 col | 16px |
| $xxlarge | 1200px | 16 col | 16px |
| $xxxlarge | 1500px | 16 col | 16px |

<Preview>
  <Story name="all" height="2000px">{{
    template: hbs`
    <div class="u-padding">
      <div class="l-grid l-grid--2up u-space--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">Two Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Two Column</div>
      </div>
      <div class="l-grid l-grid--3up u-space--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">Three Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Three Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Three Column</div>
      </div>
      <div class="l-grid l-grid--4up u-space--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">Four Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Four Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Four Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Four Column</div>
      </div>
      <div class="l-grid l-grid--5up u-space--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">Five Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Five Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Five Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Five Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Five Column</div>
      </div>
      <div class="l-grid l-grid--2x3 u-space--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">1/3 Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">2/3 Column</div>
      </div>
      <div class="l-grid l-grid--3x2 u-space--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">2/3 Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">1/3 Column</div>
      </div>
      <div class="l-grid l-grid--1x4 u-space--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">1/4 Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">3/4 Column</div>
      </div>
      <div class="l-grid l-grid--4x1 l-grid--full-width-small u-space--double--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">3/4 Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">1/4 Column</div>
      </div>
      <h3 class="u-space--bottom">With large gutters:</h3>
      <div class="l-grid l-grid--2up l-grid--large-gutters u-space--double--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">Two Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Two Column</div>
      </div>
      <h3 class="u-space--bottom">With no gutters:</h3>
      <div class="l-grid l-grid--no-gutters l-grid--2up u-space--double--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center">Two Column</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">Two Column</div>
      </div>
      <h3 class="u-space--bottom">Reordering:</h3>
      <div class="l-grid l-grid--2up u-space--double--bottom">
        <div class="u-background-color--cool-white u-padding--half u-align-center l-grid--order-1-large">Second on small breakpoint, first elsewhere</div>
        <div class="u-background-color--cool-white u-padding--half u-align-center l-grid--order-2-large">First on small breakpoint, second elsewhere</div>
      </div>
      <h3 class="u-space--bottom">Vertical Alignment:</h3>
      <div class="l-grid l-grid--1x4 l-grid--top u-space--bottom">
        <div><img alt="List" src="./images/Placeholder-Image-1_1.png" alt="placeholder image"/></div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">top</div>
      </div>
      <div class="l-grid l-grid--1x4 l-grid--middle u-space--bottom">
        <div><img alt="List" src="./images/Placeholder-Image-1_1.png" alt="placeholder image"/></div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">middle</div>
      </div>
      <div class="l-grid l-grid--1x4 l-grid--bottom u-space--bottom">
        <div><img alt="List" src="./images/Placeholder-Image-1_1.png" alt="placeholder image"/></div>
        <div class="u-background-color--cool-white u-padding--half u-align-center">bottom</div>
      </div>
    </div>
    `
  }}</Story>
</Preview>