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

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

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