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:

Classxsmall
width >= 480px
small
width >= 568px
medium
width >= 768px
large
width >= 1024px
xlarge
width >= 1200px
Width
col-5xsmall-5small-5medium-5large-5xlarge-55%
col-10xsmall-10small-10medium-10large-10xlarge-1010%
col-15xsmall-15small-15medium-15large-15xlarge-1515%
col-20xsmall-20small-20medium-20large-20xlarge-2020%
col-25xsmall-25small-25medium-25large-25xlarge-2525%
col-30xsmall-30small-30medium-30large-30xlarge-3030%
col-33xsmall-33small-33medium-33large-33xlarge-3333.333333333333336%
col-35xsmall-35small-35medium-35large-35xlarge-3535%
col-40xsmall-40small-40medium-40large-40xlarge-4040%
col-45xsmall-45small-45medium-45large-45xlarge-4545%
col-50xsmall-50small-50medium-50large-50xlarge-5050%
col-55xsmall-55small-55medium-55large-55xlarge-5555%
col-60xsmall-60small-60medium-60large-60xlarge-6060%
col-65xsmall-65small-65medium-65large-65xlarge-6565%
col-66xsmall-66small-66medium-66large-66xlarge-6666.66666666666666%
col-70xsmall-70small-70medium-70large-70xlarge-7070%
col-75xsmall-75small-75medium-75large-75xlarge-7575%
col-80xsmall-80small-80medium-80large-80xlarge-8080%
col-85xsmall-85small-85medium-85large-85xlarge-8585%
col-90xsmall-90small-90medium-90large-90xlarge-9090%
col-95xsmall-95small-95medium-95large-95xlarge-9595%
col-100xsmall-100small-100medium-100large-100xlarge-100100%
colxsmall-autosmall-automedium-autolarge-autoxlarge-autoEqual width

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-grid-gap: 16px;
}

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 medium-50">.col-100.medium-50</div>
    <div class="col-100 medium-50">.col-100.medium-50</div>
  </div>
  <div class="row">
    <div class="col-50 medium-25">.col-50.medium-25</div>
    <div class="col-50 medium-25">.col-50.medium-25</div>
    <div class="col-50 medium-25">.col-50.medium-25</div>
    <div class="col-50 medium-25">.col-50.medium-25</div>
  </div>
  <div class="row">
    <div class="col-100 medium-40">.col-100.medium-40</div>
    <div class="col-50 medium-60">.col-50.medium-60</div>
    <div class="col-50 medium-66">.col-50.medium-66</div>
    <div class="col-100 medium-33">.col-100.medium-33</div>
  </div>
</div>