Example Complex Layout

Resize your browser window to test.

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

.m

Detail of html code

.grid
  .grid6
   .m12
  .grid6
    .grid7.sizeS-grid12
      .m6.sizeS-m12.sizeXS-m6
      .m6.sizeS-m12.sizeXS-m6
    .grid5.sizeS-grid12
        .m12.sizeXS-m4
        .m12.sizeXS-m6.sizeXS-m4
        .m12.sizeXS-m6.sizeXS-m4
.grid
  .m4
  .grid8
    .m12.sizeS-m6.sizeXS-m6
    .m12.sizeS-m6.sizeXS-m6
.grid
  .m3.sizeS-m6
  .m3.sizeS-m6.sizeXS-m6
  .m3.sizeS-m6.sizeXS-m6
  .m3.sizeS-m6
  .m12.sizeXS-m6
  .m1.sizeXS-m6
  .m1
  .m1.sizeXS-m6
  .m1.sizeXS-m6
  .m1
  .m1.sizeXS-m6
  .m1.sizeXS-m6
  .m1
  .m1.sizeXS-m6
  .m1.sizeXS-m6
  .m1
  .m1.sizeXS-m6
  .m2.sizeS-m3.sizeXS-m6
  .m2.sizeS-m3
  .m2.sizeS-m3.sizeXS-m6.sizeXS-m3
  .m2.sizeS-m3.sizeXS-m6.sizeXS-m3
  .m2.sizeS-m6.sizeXS-m3
  .m2.sizeS-m6.sizeXS-m3