THE GRID

The grid is one of the most important aspects of any framework, especially as a flexible grid determines how responsive a site can be.

HTML  provides us with the option of a flexible grid, or a standard (non-flexible) grid — although it’s not clear when you’d use the latter given the increasing dominance of mobile devices.

To create a flexible grid with two equal-sized columns, we’d use:

<div class="grid flex">
        <div class="col_6 column">Content Here</div>
        <div class="col_6 column">Content Here</div>
</div>

As you can see, all we’ve done is add some simple classes to three divs. If you’d prefer the non-flexible grid, all you need to do is remove the flex classname from the outer div.

(Note that the flexible grid will stretch to the width of the entire screen, whereas the non-flexible grid has a maximum width of 1024px.)

In addition to the based classes above, there are a number of helper classes that we can use, for example:

• show-desktop and hide-desktop with these classes you can decide if you want that grid to be visible on a desktop computer.
• show-tablet and hide-tablet the same concept applies here, but for tablet devices.
• show-phone and hide-phone once again, these classes dictate visibility, this time for smart phones.

If we wanted to hide our two column grid on smartphones, for example, we’d use code like this:

As you can see, all we’ve done is add some simple classes to three divs. If you’d prefer the non-flexible grid, all you need to do is remove the flex classname from the outer div.

(Note that the flexible grid will stretch to the width of the entire screen, whereas the non-flexible grid has a maximum width of 1024px.)

In addition to the based classes above, there are a number of helper classes that we can use, for example:

• show-desktop and hide-desktop with these classes you can decide if you want that grid to be visible on a desktop computer.
• show-tablet and hide-tablet the same concept applies here, but for tablet devices.
• show-phone and hide-phone once again, these classes dictate visibility, this time for smart phones.

If we wanted to hide our two column grid on smartphones, for example, we’d use code like this:

<div class="grid flex hide-phone">...</div>