Grids

In standard HTML/CSS projects the most repeatable element is grid. Of course, you can use somebody else's grid or take it from a CSS framework such as Bootstrap or Foundation. Is it hard to create it from scratch? Not really. In this chapter, we will create a basic grid system and will use it to see how it creates rows and columns.

Standard grids 16/12

The standard grid is based on a 16-column or 12-column system. What are the advantages of both systems? It depends on your structure. For example, after analyzing the layout, say you need:

• 3-column composition

• 2-column composition

• 6-column composition

So, you can use the 12-columns system. However, as you can see, you need to stick to this system, so how can you create your own code so it's more elastic? You can use the following naming convention:

.grid-NofK

Here, N is the number of columns and K is the divider, for example:

.grid-3of12
.grid-5of6

When you are working with grids, you need to remember that sometimes you need to push some columns...