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 ...

Get Professional CSS3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.