Fluidigrid

Fluidigrid

Fluidigrid is a simple and lightweight CSS helper for building quick and efficient layouts.

Download

1-1

2-4

5-9

10-12

1-3

4-6

1-1

2-2

3-3

4-4

5-5

6-6

7-7

8-8

9-9

10-10

11-11

12-12

5-8

1-9

4-12

2-5

Getting started

You can copy the raw file and add it to your project.

You can use the Fluidigrid Generator to create your own naming convention for custom experience.

Structure

Fluidigrid setup is simple, it is based on 12 column grid-template-columns. Each of the 12 cells are using the fr (fractional unit). When going below 1024px the layout switches the 1fr.

How to use

You can create your own grid html element or add a class .grid to the wrapper you want to create the grid layout. Then you should declare start and values for each of your columns to create the layout. Fluidigrid comes with pre-declared naming convention, we use cs[n] for grid-column-start:[n] and ce[n] for grid-column-end:[n]. For example if you want to declare a column which starts from the first to last column you will declare cs1 ce12.

Easy to adapt

  • 2KB file

  • Change to :root values for customization
  • Fluidigrid Generator to create your own naming convention for custom experience.

Examples

Contributions

If you want you can always contribute in Github and ask for more, this would help us create something more meaningful.