Grid / Layout Grid

    Framework7 comes with flexible layout grid that allows you place your content as you need.

    Grid Layout

    <!-- Each "cells" row should be wrapped with div class="row" -->
    <div class="row">
        <!-- Each "cell" has col-[width in percents] class -->
        <div class="col-50">50%</div>
        <div class="col-50">50%</div>
    </div>
    <div class="row">
        <!-- Each "cell" has col-[width in percents] class -->
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
    </div>

    By defaul all "cells" has 15px gap between each other for iOS theme and 16px gap for MD theme. If you want "cells" without gap, you should add additional no-gap class to "row":

    <!-- Additional "no-gap" class on row to remove space between cells -->
    <div class="row no-gap">
        <!-- Each "cell" has col-[width in percents] class -->
        <div class="col-50">50%</div>
        <div class="col-50">50%</div>
    </div>
    <div class="row">
        <!-- Each "cell" has col-[width in percents] class -->
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
    </div>

    Column Sizes

    The following columns size are available:

    Class Tablet Class
    width >= 768px
    Desktop Class
    width >= 1025px
    Width
    col-5 tablet-5 desktop-5 5%
    col-10 tablet-10 desktop-10 10%
    col-15 tablet-15 desktop-15 15%
    col-20 tablet-20 desktop-20 20%
    col-25 tablet-25 desktop-25 25%
    col-30 tablet-30 desktop-30 30%
    col-33 tablet-33 desktop-33 33.333333333333336%
    col-35 tablet-35 desktop-35 35%
    col-40 tablet-40 desktop-40 40%
    col-45 tablet-45 desktop-45 45%
    col-50 tablet-50 desktop-50 50%
    col-55 tablet-55 desktop-55 55%
    col-60 tablet-60 desktop-60 60%
    col-65 tablet-65 desktop-65 65%
    col-66 tablet-66 desktop-66 66.66666666666666%
    col-70 tablet-70 desktop-70 70%
    col-75 tablet-75 desktop-75 75%
    col-80 tablet-80 desktop-80 80%
    col-85 tablet-85 desktop-85 85%
    col-90 tablet-90 desktop-90 90%
    col-95 tablet-95 desktop-95 95%
    col-100 tablet-100 desktop-100 100%
    col tablet-auto desktop-auto Equal width

    Examples

    By default grid columns (cells) has no any visual styles, we'll add them for this demo:

    div[class*="col"] {
      background: #fff;
      text-align: center;
      color: #000;
      border: 1px solid #ddd;
      padding: 5px;
      margin-bottom: 15px;
      font-size: 12px;
    }
    <div class="block-title">Columns with gap</div>
    <div class="block">
      <div class="row">
        <div class="col">50% (.col)</div>
        <div class="col">50% (.col)</div>
      </div>
      <div class="row">
        <div class="col">25% (.col)</div>
        <div class="col">25% (.col)</div>
        <div class="col">25% (.col)</div>
        <div class="col">25% (.col)</div>
      </div>
      <div class="row">
        <div class="col">33% (.col)</div>
        <div class="col">33% (.col)</div>
        <div class="col">33% (.col)</div>
      </div>
      <div class="row">
        <div class="col">20% (.col)</div>
        <div class="col">20% (.col)</div>
        <div class="col">20% (.col)</div>
        <div class="col">20% (.col)</div>
        <div class="col">20% (.col)</div>
      </div>
      <div class="row">
        <div class="col-33">33% (.col-33)</div>
        <div class="col-66">66% (.col-66)</div>
      </div>
      <div class="row">
        <div class="col-25">25% (.col-25)</div>
        <div class="col-25">25% (.col-25)</div>
        <div class="col-50">50% (.col-50)</div>
      </div>
      <div class="row">
        <div class="col-75">75% (.col-75)</div>
        <div class="col-25">25% (.col-25)</div>
      </div>
      <div class="row">
        <div class="col-80">80% (.col-80)</div>
        <div class="col-20">20% (.col-20)</div>
      </div>
    </div>
    <div class="block-title">No gap between columns</div>
    <div class="block">
      <div class="row no-gap">
        <div class="col">50% (.col)</div>
        <div class="col">50% (.col)</div>
      </div>
      <div class="row no-gap">
        <div class="col">25% (.col)</div>
        <div class="col">25% (.col)</div>
        <div class="col">25% (.col)</div>
        <div class="col">25% (.col)</div>
      </div>
      <div class="row no-gap">
        <div class="col">33% (.col)</div>
        <div class="col">33% (.col)</div>
        <div class="col">33% (.col)</div>
      </div>
      <div class="row no-gap">
        <div class="col">20% (.col)</div>
        <div class="col">20% (.col)</div>
        <div class="col">20% (.col)</div>
        <div class="col">20% (.col)</div>
        <div class="col">20% (.col)</div>
      </div>
      <div class="row no-gap">
        <div class="col-33">33% (.col-33)</div>
        <div class="col-66">66% (.col-66)</div>
      </div>
      <div class="row no-gap">
        <div class="col-25">25% (.col-25)</div>
        <div class="col-25">25% (.col-25)</div>
        <div class="col-50">50% (.col-50)</div>
      </div>
      <div class="row no-gap">
        <div class="col-75">75% (.col-75)</div>
        <div class="col-25">25% (.col-25)</div>
      </div>
      <div class="row no-gap">
        <div class="col-80">80% (.col-80)</div>
        <div class="col-20">20% (.col-20)</div>
      </div>
    </div>
    <div class="block-title">Nested</div>
    <div class="block">
      <div class="row">
        <div class="col">50% (.col)
          <div class="row">
            <div class="col">50% (.col)</div>
            <div class="col">50% (.col)</div>
          </div>
        </div>
        <div class="col">50% (.col)
          <div class="row">
            <div class="col-33">33% (.col-33)</div>
            <div class="col-66">66% (.col-66)</div>
          </div>
        </div>
      </div>
    </div>
    <div class="block-title">Responsive Grid</div>
    <div class="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>