Grid Based Web Layout Examples
Below are examples I collected form different sources.
Please also take a look at those:
How to use a responsive grid
Examples 1
Examples 2
![](http://www.uicdesign.com/DES/images/uploads/mixed/grid-layout.jpg)
Modular
![](http://www.uicdesign.com/DES/images/uploads/mixed/modular.jpg)
Modular with different sizes
![](http://www.uicdesign.com/DES/images/uploads/mixed/modular-sizes1.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/modular-sizes2.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/modular-sizes3.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/modular-sizes4.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/modular-sizes5.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/modular-sizes6.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/modular-sizes7.jpg)
Masonry Grid
![](http://www.uicdesign.com/DES/images/uploads/mixed/masonry1.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/masonry2.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/masonry3.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/masonry4.jpg)
Just Type
![](http://www.uicdesign.com/DES/images/uploads/mixed/type1.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/type2.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/type3.jpg)
Mixed
![](http://www.uicdesign.com/DES/images/uploads/mixed/mix.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/nice2.jpg)
![](http://www.uicdesign.com/DES/images/uploads/mixed/nice21.jpg)
Responsive, fluid grid example
See the Pen Responsive, fluid grid by Oliver Roeger (@uic-des) on CodePen.