framework7.angular/kitchen-sink-material/jade/grid.jade

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

.page(data-page="grid")
  .navbar
    .navbar-inner
      .left
        a(href="index.html").back.link.icon-only
          i.icon.icon-back
      .center Grid
      .right
        a(href="#").link.open-panel.icon-only
          i.icon.icon-bars
  .page-content
    .content-block
      p Framework7 comes with flexible layout grid:
    .ks-grid
      .content-block-title Columns with gutter
      .content-block
        .row
          .col-50 .col-50
          .col-50 .col-50
        .row
          .col-25 .col-25
          .col-25 .col-25
          .col-25 .col-25
          .col-25 .col-25
        .row
          .col-33 .col-33
          .col-33 .col-33
          .col-33 .col-33
        .row
          .col-20 .col-20
          .col-20 .col-20
          .col-20 .col-20
          .col-20 .col-20
          .col-20 .col-20
        .row
          .col-33 .col-33
          .col-66 .col-66
        .row
          .col-25 .col-25
          .col-25 .col-25
          .col-50 .col-50
        .row
          .col-75 .col-75
          .col-25 .col-25
        .row
          .col-80 .col-80
          .col-20 .col-20
      .content-block-title No gutter between columns
      .content-block
        .row.no-gutter
          .col-50 .col-50
          .col-50 .col-50
        .row.no-gutter
          .col-25 .col-25
          .col-25 .col-25
          .col-25 .col-25
          .col-25 .col-25
        .row.no-gutter
          .col-33 .col-33
          .col-33 .col-33
          .col-33 .col-33
        .row.no-gutter
          .col-20 .col-20
          .col-20 .col-20
          .col-20 .col-20
          .col-20 .col-20
          .col-20 .col-20
        .row.no-gutter
          .col-33 .col-33
          .col-66 .col-66
        .row.no-gutter
          .col-25 .col-25
          .col-25 .col-25
          .col-50 .col-50
        .row.no-gutter
          .col-75 .col-75
          .col-25 .col-25
        .row.no-gutter
          .col-80 .col-80
          .col-20 .col-20
      .content-block-title Nested
      .content-block
        .row
          .col-50 .col-50
            .row
              .col-50 .col-50
              .col-50 .col-50
          .col-50 .col-50
            .row
              .col-33 .col-33
              .col-66 .col-66
      .content-block-title Responsive Grid
      .content-block
        p Grid cells have different size on Phone/Tablet
        .row
          .col-100.tablet-50 .col-100.tablet-50
          .col-100.tablet-50 .col-100.tablet-50
        .row
          .col-50.tablet-25 .col-50.tablet-25
          .col-50.tablet-25 .col-50.tablet-25
          .col-50.tablet-25 .col-50.tablet-25
          .col-50.tablet-25 .col-50.tablet-25
        .row
          .col-100.tablet-40 .col-100.tablet-40
          .col-50.tablet-60 .col-50.tablet-60
          .col-50.tablet-66 .col-50.tablet-66
          .col-100.tablet-33 .col-100.tablet-33