Basic usage

Here's a simple grid usage

Nested grids

Here's a simple nested grid usage

Push & pull

Here's how you can use push and pull into your grid

Prefix & suffix

Here's how you can use prefix and suffix into your grid

Centered

Here's how you can simply center one of your grid item

Full width row

Sometimes it's useful to have a grid column that take the entire screen width. Here's how you can do this without closing all your container and grid tags...

Show, hide, visible, etc...

Here's how you can hide or show some of your elements depending of the state you are in...

I will be hided on tablet
I will be not visible on tablet
Hello tablet!

Alignements

This is how you can align your grid items

Praesent at condimentum lorem. Nam volutpat iaculis mauris, fringilla eleifend libero sodales et. Aenean semper cursus ipsum id convallis. Proin in elementum leo. Suspendisse molestie tortor leo, quis convallis tortor dictum at. Pellentesque vel enim finibus, suscipit libero vitae, laoreet nisi. In in urna eros.
Morbi eu sem tellus. Duis non ante ut nisi luctus.

Grow / adapt

This is how you can simply use adaptive grid elements to create complexe layout.

Cras interdum quis urna ullamcorper aliquam. Duis gravida odio et nisi porttitor elementum. Duis turpis ex, finibus quis enim sit.
Donec quis ex mi. Donec diam magna, efficitur in consectetur vel, finibus et ipsum. Ut quis metus commodo urna convallis facilisis a semper nibh. Curabitur et commodo quam. Ut et tristique ante. Integer a faucibus erat. Aenean accumsan quam et urna fermentum suscipit. Morbi non aliquam ex. Morbi scelerisque tellus. Donec quis ex mi. Donec diam magna, efficitur in consectetur vel, finibus et ipsum. Ut quis metus commodo urna convallis facilisis a semper nibh. Curabitur et commodo quam. Ut et tristique ante. Integer a faucibus erat. Aenean accumsan quam et urna fermentum suscipit. Morbi non aliquam ex. Morbi scelerisque tellus
Cras interdum quis urna ullamcorper aliquam. Duis gravida odio et nisi porttitor elementum. Duis turpis ex, finibus quis enim sit.
I will take the place that my neighbours let me...
Donec quis ex mi. Donec diam magna, efficitur in consectetur vel, finibus et ipsum. Ut quis metus commodo urna convallis facilisis a semper nibh. Curabitur et commodo quam. Ut et tristique ante. Integer a faucibus erat. Aenean accumsan quam et urna fermentum suscipit. Morbi non aliquam ex. Morbi scelerisque tellus. Donec quis ex mi. Donec diam magna, efficitur in consectetur vel, finibus et ipsum. Ut quis metus commodo urna convallis facilisis a semper nibh. Curabitur et commodo quam. Ut et tristique ante. Integer a faucibus erat. Aenean accumsan quam et urna fermentum suscipit. Morbi non aliquam ex. Morbi scelerisque tellus

List

With gridle capabilities, it's become easy to create complexe list layout

  • I'm a list element This is my list element description...
  • I'm a list element This is my list element description...
  • I'm a list element This is my list element description...
  • I'm a list element This is my list element description...
  • I'm a list element This is my list element description...

Column

You can easly change the layout of your row by using this

Phasellus efficitur est tortor. Vestibulum at orci ac nulla hendrerit pharetra porta quis felis. Aliquam eleifend vestibulum massa, dictum porta nunc fermentum in. Sed ac fermentum turpis, eu bibendum sapien. Duis et suscipit libero. Vestibulum id aliquam tellus. Sed ultrices viverra justo quis scelerisque. Maecenas et nisl sit amet ex consectetur lobortis. Integer ultrices ipsum sit amet egestas molestie. Nullam. Phasellus efficitur est tortor. Vestibulum at orci ac nulla hendrerit pharetra porta quis felis. Aliquam eleifend vestibulum massa, dictum porta nunc fermentum in. Sed ac fermentum turpis, eu bibendum sapien. Duis et suscipit libero. Vestibulum id aliquam tellus. Sed ultrices viverra justo quis scelerisque. Maecenas et nisl sit amet ex consectetur lobortis. Integer ultrices ipsum sit amet egestas molestie. Nullam. Phasellus efficitur est tortor. Vestibulum at orci ac nulla hendrerit pharetra porta quis felis. Aliquam eleifend vestibulum massa, dictum porta nunc fermentum in. Sed ac fermentum turpis, eu bibendum sapien. Duis et suscipit libero. Vestibulum id aliquam tellus. Sed ultrices viverra justo quis scelerisque. Maecenas et nisl sit amet ex consectetur lobortis. Integer ultrices ipsum sit amet egestas molestie. Nullam. Phasellus efficitur est tortor. Vestibulum at orci ac nulla hendrerit pharetra porta quis felis. Aliquam eleifend vestibulum massa, dictum porta nunc fermentum in. Sed ac fermentum turpis, eu bibendum sapien. Duis et suscipit libero. Vestibulum id aliquam tellus. Sed ultrices viverra justo quis scelerisque. Maecenas et nisl sit amet ex consectetur lobortis. Integer ultrices ipsum sit amet egestas molestie. Nullam. Phasellus efficitur est tortor. Vestibulum at orci ac nulla hendrerit pharetra porta quis felis. Aliquam eleifend vestibulum massa, dictum porta nunc fermentum in. Sed ac fermentum turpis, eu bibendum sapien. Duis et suscipit libero. Vestibulum id aliquam tellus. Sed ultrices viverra justo quis scelerisque. Maecenas et nisl sit amet ex consectetur lobortis. Integer ultrices ipsum sit amet egestas molestie. Nullam. Phasellus efficitur est tortor. Vestibulum at orci ac nulla hendrerit pharetra porta quis felis. Aliquam eleifend vestibulum massa, dictum porta nunc fermentum in. Sed ac fermentum turpis, eu bibendum sapien. Duis et suscipit libero. Vestibulum id aliquam tellus. Sed ultrices viverra justo quis scelerisque. Maecenas et nisl sit amet ex consectetur lobortis. Integer ultrices ipsum sit amet egestas molestie. Nullam.
Morbi eu sem tellus. Duis non ante ut nisi luctus.
Morbi eu sem tellus. Duis non ante ut nisi luctus.
Aenean faucibus felis enim, ac convallis neque aliquet rhoncus. Phasellus vitae nibh sit amet nisi tincidunt ultricies in vel ex.
Morbi eu sem tellus. Duis non ante ut nisi luctus.

Order

Gridle order classes allows you display your columns in another order that their defined in your html. Here's how

I'm the #1 in the html
I'm the #2 in the html
I'm the #3 in the html
I'm the #1 in the html
I'm the #2 in the html
I'm the #3 in the html

Reverse

The same way as the order, you can reverse your columns order easly by using this

I'm the #1 in the html
I'm the #2 in the html
I'm the #3 in the html
I'm the #1 in the html
I'm the #2 in the html
I'm the #3 in the html

Element queries

Here's how you can use element queries in your grid. There's actually nothing to see in the html, you just have to use the gridle_eq mixin in your scss files.