A grid is a structure, with a very rich history used to align negative space in your design. Using a grid makes content appear to flow naturally on your page, and allows you to quickly adjust layouts without assigning specific sizes directly to content elements, letting you rapidly prototype and design your page.
About grid-system:
The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.
Grid system is composed of some key concepts as follows
- container
- Row
- Column
- gutter
Container
Container is acts like a wrapper to the row. Container holds certain width properties either fixed or fluid (100%) on the basis of design requirement.
Row
The name only suggest the use and behavior of the component. Row itself is a wrapper to the columns. Multiple rows are possible in an grid system. this is a row level component which holds number of cells (columns). Ideally row width is as equal as Container width.
Columns
This is a cell level component, usually a grid system is defied on the basis of number of columns, for eg 12-Column grid, 16-Columnn grid etc.
Columns are vertical cells which are placed within a row, width of total columns and total number of gutter should take the entire width of row.
Gutter
Gutter is a space between two columns, ideally it separates two columns with specified width in the grid system. gutter are less than one with total number of column. for eg. if there are 12 column in the grid system then 11 gutter will be there in between the 12 columns.
