A grid system is a system for web design based on a grid. It is a way of organizing your content on the page with a grid as the primary element.
Using a grid system is a great way to organize your pages. You can make the grid as large or as small as you want it and have as many columns or rows as you need.
Grids are a very formal way of designing web pages because they control the number of columns, rows, gutters between the columns and even the lines and spacing of the area around the grid.
Many people find grids very rigid for design because everything starts looking very square and boring. But when you get better at the use of grids you will learn how to break the grid to make your design more dynamic and effective.
There are lots of frameworks that use grids, some of the more popular ones include:
- Responsive Grid System – this is a scalable grid system that is more responsive and includes breakpoints to create different grids at different device sizes.
- Responsive GS – this is much more of a framework to help you build your site, and it uses more HTML5 by example. It comes with some polyfills to help ensure your grids work correctly
- Zen Grids – This is a system to let you use Sass to figure out all the sizes and position the elements appropriately. It means you have to install and understand Sass to use it. But Sass isn’t that hard. CSS is harder in many ways.
- 960 Grid System – this assumes a width of 960 pixels which can be divided into many columns with variations of 12 columns and 16 columns.