Grid

Basics

Blexar layout consists of two main elements:

• grid: container that wraps columns
• columns: elements that hold your content

Each column will have an equal width, no matter the number of columns.

  

    First column
  
  

    Second column
  
  

    Third column
  
  

    Fourth column
  

Sizes

If you want a specific width for column you can choose bettwen 12 sizes, there are size classes for each division:

• is-x

  

    `is-12`
  



  

    `is-10`
  
  

    auto
  
  

    auto
  



  

    `is-8`
  
  

    auto
  
  

    auto
  



  

    `is-4`
  
  

    auto
  
  

    auto
  

If you want all columns to be the same width you can add modifier on grid element, to apply to all nested columns.`

  

    `auto`
  
  

    `auto`
  
  

    `auto`
  

This is not disabling the ability to control specific column

  

    `auto`
  
  

    `auto`
  
  

    `is-6`
  

Offest

As the grid can be divided into 12 columns, there are size classes for each division:

• is-offset-x

  

    `is-offset-4`
  



  

    `is-offset-3`
  



  

    `is-offset-2`
  

Grid Display

you can control columns arrangend in the .grid using display modifiers

• .is-shrink: columns take only the size of their content

  

    Small content
  
  

    Very long content here
  

• .is-fit: removes gutters between columns

  

    column
  
  

    column
  

• .is-vertical: arrange columns in a vertical order

  

    `is-7`
  
  

    `is-5`
  

Alignment

Vertical Align

• .is-top: align columns to the top of the grid container
• .is-middle: align columns to vertically middle of the grid container
• .is-bottom: align columns to the middle of the grid container

  

    column
  
  

    column
  
  

    column
  



  

    column
  
  

    column
  
  

    column
  



  

    column
  
  

    column
  
  

    column
  

Horizontal Align

• .is-start: align columns to the start of the grid container
• .is-center: align columns to the center of the grid container
• .is-end: align columns to the end of the grid container

  

    column
  



  

    column
  



  

    column
  

Summary

Size Modifiers

Adjust the width and offset of columns on different devices.

Note: you can use .is-[$number] instead of .is-mobile-[$number], as a shorthand.

Offset Modifiers

Adjust the width and offset of columns on different devices.