Home

The Grid System

The functional CSS grid system is based on the CSS Grid Layout Module. You can build any kind of layout even easier than with other frameworks because the Functional CSS framework uses the same naming convention as the CSS Grid Layout Module, and it works in mobile-first.

The ideal way to use the grid system is to use the foundation classes and extend it if you need more columns or rows. Most of the time, you will need no more than 12 columns and 12 rows. The metric system used is multiple of 4, meaning that you can have 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, and 44 as spaces between columns and rows. The grid system works generically, meaning that you can use it in any breakpoint, but you can specify different rows and columns number based on the breakpoint you want to target.

Grid properties

In order to get started with the grid system, you need to define display--grid or display--inline-grid (if you want to make it for all breakpoints) on the parent element. Then, you can use the following properties:

Properties for the Parent (Grid Container)

Properties for the children (grid items)



Examples

Let's start by building a simple grid with 12 columns:

<div className="display--grid template-columns--12">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

The code above will create a grid with 12 columns for all devices, this may not look good in mobile when tested, but do not worry, we can build grids for any device with ease. The grid that will be output (don't mind the border-dp, the padding--4 and the text-align--center classes, they are just for the example) will be like this:

1
2
3
4
5
6
7
8
9
10
11
12

As you see, the grid created 12 columns for all devices, equally spaced, and no gap. We can change the number of columns and add gaps between. In this example, we reduce the number of columns to 6 and add a gap of 8px between them:

<div className="display--grid gap--8 template-columns--6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

The code above will create a grid with 12 columns for all devices, this may not look good in mobile when tested, but do not worry, we can build grids for any device with ease. The grid that will be output (don't mind the border-dp, the padding--4 and the text-align--center classes, they are just for the example) will be like this:

1
2
3
4
5
6
7
8
9
10
11
12


Responsive Grids

To create a responsive grid, you need to add the sm--, md--, lg--, xl-- or xxl--, and the property you want to change. For example, if you want to change the number of columns in mobile to 2, on iPad vertical, horizontal to 3, and small desktop to 5, and bigger screens to 7 and huge screens to 12 you can do the following code:

<div className="display--grid gap--8 sm-template-columns--2 md-template-columns--3 lg-template-columns--5 xl-template-columns-7 xxl-template-columns--12">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

And the output will be like this (resize your browser to see the effect):

1
2
3
4
5
6
7
8
9
10
11
12


Imagine the possibilities, you can create a grid for any device with ease. You can create millions of combinations for layouts and even for children items.

You can also define the gap between columns and rows separately, but more importantly, the different gaps between devices. For example, the gap of the previous grid layout in mobile will be 4px, in medium devices will be 8px, in large screens 12px, in bigger screens 16px and in huge screens 32px. To do this, you can use the following classes:

<div className="display--grid sm-gap--4 md-gap--8 lg-gap--12 xl-gap--16 xxl-gap--32 sm-template-columns--2 md-template-columns--3 lg-template-columns--5 xl-template-columns--7 xxl-template-columns--12">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

And the output will be like this (resize your browser to see the effect and check the gaps):

1
2
3
4
5
6
7
8
9
10
11
12

Normally, you will not need that much flexibility, with gaps, but it is a nice feature to have and same with the rest of the properties. The most common use is switching columns between devices.