Grid

Sailor provides a few layout utility classes based on the CSS grid properties.

Configuration

NOTE : The grid utility classes are the only ones (with spacing) that you can't change the name. Juste be careful if you already have classes with these names in your project.

Columns number

The maximum value for columns number used to generate the grid and order classes. A value around 6 or 8 is often enough IMO. If you use 6, you can use grid-col-1, grid-col-2, grid-col-3, grid-col-4, grid-col-5, grid-col-6, but not grid-col-7 and up !

config.scss

      // required for grid and ordering columns utility classes
      $s-grid-cols-number: 6,

Rows number

The maximum value of rows used to generate the grid and order classes. If you don’t plan to use the row utility classes, do not add it to your config file.

config.scss

         // required for grid row utilty classes
         $s-grid-rows-number: 4,

Grid columns

grid-col-5

The grid-col-{number} class creates a repetitive columns layout without any gap

1
2
3
4
5

Grid gap

NOTE : Grid-gap utility classes are produced using the values of $s-spacing-values in your configuration file.

grid-col-5 + gap-col-half

The gap-col-{value} class add a gap to columns only.

1
2
3
4
5
6
7
8
9
10
grid-col-5 + gap-row-half

The gap-row-{value} class add a gap to rows only.

1
2
3
4
5
6
7
8
9
10
grid-col-5 + gap-half

The gap-{value} class add the equal gap value to columns and the rows

1
2
3
4
5
6
7
8
9
10
grid-col-5 + gap-col-half + gap-row-quarter

You can use different value for gap between columns and rows

1
2
3
4
5
6
7
8
9
10

Columns span

grid-col-5 + gap-half

By default, all div span to 1 column. You can add col-span-{number} to a column to change the width.

1
2col-span-2
3
4
grid-col-3 + gap-full

Simple example with 1/3 and 2/3 with a big gap (full).

1
2col-span-2

Columns start

grid-col-5 + gap-half

You can add col-start-{number} to any column to change the starting column.

1
2col-start-3
3
4

Order

grid-col-4 + gap-half

You can add order-{number} to any grid div to change the position. Note that column without the order class will be placed first.

1order-4
2order-3
3 (no class)
4order-2

Grid row

grid-col-5 + grid-row-3 + gap-quarter

The grid-row-{number} classes are used to set a define a fixed number of rows. Grids auto-flow, you don't have to define a number of rows unless you want to make an element stretch to a specific row.

1
2
3 row-span-3
4
5

Row Span

grid-col-5 + gap-quarter

You can add row-span-{number} to stretch a colum.

1 row-span-2
2
3
4 row-span-2
5
6
7
grid-col-5 + gap-quarter + grid-row-3

Example with a bigger element and other elements auto-flow around

1
2
3 row-span-3 col-span-2
4
5
6
7
8

Responsive

The responsive syntax is the same for all utilities and grid classes, just add the prefix like {prefix}:{class}.

grid-col-2 + md:grid-col-3 + xl:grid-col-6 + gap-quarter

2 columns on mobile (default), 3 columns on md and 6 columns on xl

1
2
3
4
5
6

Nested

You can easily nest grid inside grid. You just need to apply the same grid-col-{value} class to any div inside your grid.

1
1
2
3
4