# Grid System

[1]: https://en.wikipedia.org/wiki/Grid_(graphic_design)

The grid system called grid system, it defined unit grid size, the number of combinations of different mesh can be designed to a different layout. Use a grid system layout has many advantages, then do not say, a grid system for details by [Grid System][1], the current common applications such as grid system:

- [bootstrap](https://github.com/twbs/bootstrap)
- [susy](https://github.com/oddbird/susy/) ,[lost](https://github.com/peterramsing/lost)
- Using [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) to build grid system 

#### PoPo Grid System

![grid_01](../_images/grid_01.png)
- The image is a grid system of 12 rows x 24 columns constructed by PoPo.

The PoPo grid system and other grid system is different, PoPo uses the ranks of two-dimensional grid system layout, the number of rows and columns can be customized, such as the definition of grid system is 6 rows and 36 columns, 12 rows and 24 columns, 24 rows and 48 columns, 25 rows and 17 columns, 48 rows and 110 columns……