Grid / Layout Grid

Grid Layout
Column Sizes
Resizable Grid
Grid Events

DOM Events
App Events

CSS Variables
Examples

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 default 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	xsmall width >= 480px	small width >= 568px	medium width >= 768px	large width >= 1024px	xlarge width >= 1200px	Width
col-5	xsmall-5	small-5	medium-5	large-5	xlarge-5	5%
col-10	xsmall-10	small-10	medium-10	large-10	xlarge-10	10%
col-15	xsmall-15	small-15	medium-15	large-15	xlarge-15	15%
col-20	xsmall-20	small-20	medium-20	large-20	xlarge-20	20%
col-25	xsmall-25	small-25	medium-25	large-25	xlarge-25	25%
col-30	xsmall-30	small-30	medium-30	large-30	xlarge-30	30%
col-33	xsmall-33	small-33	medium-33	large-33	xlarge-33	33.333333333333336%
col-35	xsmall-35	small-35	medium-35	large-35	xlarge-35	35%
col-40	xsmall-40	small-40	medium-40	large-40	xlarge-40	40%
col-45	xsmall-45	small-45	medium-45	large-45	xlarge-45	45%
col-50	xsmall-50	small-50	medium-50	large-50	xlarge-50	50%
col-55	xsmall-55	small-55	medium-55	large-55	xlarge-55	55%
col-60	xsmall-60	small-60	medium-60	large-60	xlarge-60	60%
col-65	xsmall-65	small-65	medium-65	large-65	xlarge-65	65%
col-66	xsmall-66	small-66	medium-66	large-66	xlarge-66	66.66666666666666%
col-70	xsmall-70	small-70	medium-70	large-70	xlarge-70	70%
col-75	xsmall-75	small-75	medium-75	large-75	xlarge-75	75%
col-80	xsmall-80	small-80	medium-80	large-80	xlarge-80	80%
col-85	xsmall-85	small-85	medium-85	large-85	xlarge-85	85%
col-90	xsmall-90	small-90	medium-90	large-90	xlarge-90	90%
col-95	xsmall-95	small-95	medium-95	large-95	xlarge-95	95%
col-100	xsmall-100	small-100	medium-100	large-100	xlarge-100	100%
col	xsmall-auto	small-auto	medium-auto	large-auto	xlarge-auto	Equal width

Resizable Grid

It is also possible to make layout grid resizable. Let's take a look at its HTML layout:

<div class="row">
  <div class="col resizable">
    ...
    <span class="resize-handler"></span>
  </div>
  <div class="col resizable">
    ...
    <span class="resize-handler"></span>
  </div>
  ...
</div>

where:

resizable - additional class on column to make it resizable
<span class="resize-handler"></span> - resize handler between columns that is used to resize columns

There are also additional classes that can be used to control resizing:

resizable-fixed - columns with such class will have fixed size (not resizable)
resizable-absolute - enables absolute (in px) resizing. When it is not enabled, it resize columns in relative form (sets width in %), this keeps them responsive. With absolute resize it will set absolute size in px to each column, but it can break responsiveness.

In the same way, we can make grid rows resizable as well:

<div>
  <!-- add "resizable" class to row -->
  <div class="row resizable">
    <div class="col">...</div>
    <div class="col">...</div>
    <!-- put "resize-handler" as the last child of the row -->
    <span class="resize-handler"></span>
  </div>

  <!-- add "resizable" class to row -->
  <div class="row resizable">
    <div class="col">...</div>
    <div class="col">...</div>
    <!-- put "resize-handler" as the last child of the row -->
    <span class="resize-handler"></span>
  </div>

  ...
</div>

Resizable rows support same additional resizable-fixed and resizable-absolute modifiers.

To limit colums min/max size (width), they must have min-width and max-width CSS properties specified
To limit rows min/max size (height), they must have min-height and max-height CSS properties specified
By default rows (as well as columns) resized in "relative way", to ensure it works correctly, make sure they have parent with fixed height

Grid Events

Grid will fire the following DOM events on column and row items and app events on app instance:

DOM Events

Event	Target	Description
grid:resize	Grid column or row element<div class="col"><div class="row">	Event will be triggered on resizable grid column (or row) resize

App Events

Event	Arguments	Description
gridResize	(el)	Event will be triggered on resizable grid column (or row) resize

CSS Variables

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

:root {
  --f7-grid-gap: 16px;
  --f7-grid-row-gap: 0px;
  --f7-grid-resize-handler-bg-color: rgba(0, 0, 0, 0.35);
}
:root .dark,
:root.dark {
  --f7-grid-resize-handler-bg-color: rgba(255, 255, 255, 0.35);
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Grid</div>
      </div>
    </div>
    <div class="page-content">
      <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>
      <div class="block-title">Resizable Cols</div>
      <div class="block grid-resizable-demo">
        <div class="row">
          <div class="col resizable" style="min-width: 20px">
            <span>1</span>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable" style="min-width: 20px">
            <span>2</span>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable" style="min-width: 20px">
            <span>3</span>
            <span class="resize-handler"></span>
          </div>
        </div>
      </div>
      <div class="block-title">Resizable Fixed Col</div>
      <div class="block-header">2nd column has fixed size</div>
      <div class="block grid-resizable-demo">
        <div class="row">
          <div class="col resizable" style="min-width: 20px">
            <span>1</span>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable resizable-fixed" style="min-width: 20px">
            <span>2</span>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable" style="min-width: 20px">
            <span>3</span>
            <span class="resize-handler"></span>
          </div>
        </div>
      </div>
      <div class="block-title">Resizable Grid</div>
      <div class="block grid-resizable-demo">
        <div class="row align-items-stretch" style="height: 300px">
          <div class="col resizable demo-col-center-content" style="min-width: 50px">Left<span
              class="resize-handler"></span>
          </div>
          <div class="col resizable display-flex flex-direction-column"
            style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
            <div class="row resizable" style="height: 50%; min-height: 50px">
              <div class="col demo-col-center-content" style="height: 100%">Center Top</div>
              <span class="resize-handler"></span>
            </div>
            <div class="row resizable" style="height: 50%; min-height: 50px">
              <div class="col demo-col-center-content" style="height: 100%">Center Bottom</div>
              <span class="resize-handler"></span>
            </div>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable demo-col-center-content" style="min-width: 50px">Right<span
              class="resize-handler"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  div[class*="col"] {
    background: #fff;
    text-align: center;
    color: #000;
    border: 1px solid #ddd;
    padding: 5px;
    font-size: 12px;
    margin-bottom: 16px;
  }

  .grid-resizable-demo {
    --f7-grid-row-gap: 16px;
  }

  .grid-resizable-demo div[class*="col"] {
    margin-bottom: 0;
  }

  .grid-resizable-demo .demo-col-center-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>