Grid

CSS grid is very powerful! This grid is mainly to simplify the layout creation, as you used to do with Flexbox. You must need to extend it with custom classes if you want to use pixel values in mixmax or for any super complex layout.

Props to Raster CSS (by Rasmus Andersson) for the inspiration and Tailwind CSS (by Adam Wathan) for the naming convention. I used nice features from you both to create a minimalist layout system that fits common needs.

Config values

The maximum value for columns number used to generate the grid and order classes. No need to go crazy :) 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 !


      // required for grid and ordering columns utility classes
      $s-grid-cols-number: 6;
      // required for grid row utilty classes - delete if you only use columns
      $s-grid-rows-number: 4;
    

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.


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

Gap is only applied inside grid, between divs.

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