SponsorsBecome a sponsor

Grid / Layout Grid

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

Grid Layout

<!-- Grid with 2 columns -->
<div class="grid grid-cols-2">
  <div>50%</div>
  <div>50%</div>
</div>
<!-- Grid with 3 columns and gap/space between -->
<div class="grid grid-cols-3 grid-gap">
  <div>33%</div>
  <div>33%</div>
  <div>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
grid-cols-1xsmall-grid-cols-1small-grid-cols-1medium-grid-cols-1large-grid-cols-1xlarge-grid-cols-1
grid-cols-2xsmall-grid-cols-2small-grid-cols-2medium-grid-cols-2large-grid-cols-2xlarge-grid-cols-2
grid-cols-3xsmall-grid-cols-3small-grid-cols-3medium-grid-cols-3large-grid-cols-3xlarge-grid-cols-3
grid-cols-4xsmall-grid-cols-4small-grid-cols-4medium-grid-cols-4large-grid-cols-4xlarge-grid-cols-4
grid-cols-5xsmall-grid-cols-5small-grid-cols-5medium-grid-cols-5large-grid-cols-5xlarge-grid-cols-5
grid-cols-6xsmall-grid-cols-6small-grid-cols-6medium-grid-cols-6large-grid-cols-6xlarge-grid-cols-6
grid-cols-7xsmall-grid-cols-7small-grid-cols-7medium-grid-cols-7large-grid-cols-7xlarge-grid-cols-7
grid-cols-8xsmall-grid-cols-8small-grid-cols-8medium-grid-cols-8large-grid-cols-8xlarge-grid-cols-8
grid-cols-9xsmall-grid-cols-9small-grid-cols-9medium-grid-cols-9large-grid-cols-9xlarge-grid-cols-9
grid-cols-10xsmall-grid-cols-10small-grid-cols-10medium-grid-cols-10large-grid-cols-10xlarge-grid-cols-10
grid-cols-11xsmall-grid-cols-11small-grid-cols-11medium-grid-cols-11large-grid-cols-11xlarge-grid-cols-11
grid-cols-12xsmall-grid-cols-12small-grid-cols-12medium-grid-cols-12large-grid-cols-12xlarge-grid-cols-12
grid-cols-13xsmall-grid-cols-13small-grid-cols-13medium-grid-cols-13large-grid-cols-13xlarge-grid-cols-13
grid-cols-14xsmall-grid-cols-14small-grid-cols-14medium-grid-cols-14large-grid-cols-14xlarge-grid-cols-14
grid-cols-15xsmall-grid-cols-15small-grid-cols-15medium-grid-cols-15large-grid-cols-15xlarge-grid-cols-15
grid-cols-16xsmall-grid-cols-16small-grid-cols-16medium-grid-cols-16large-grid-cols-16xlarge-grid-cols-16
grid-cols-17xsmall-grid-cols-17small-grid-cols-17medium-grid-cols-17large-grid-cols-17xlarge-grid-cols-17
grid-cols-18xsmall-grid-cols-18small-grid-cols-18medium-grid-cols-18large-grid-cols-18xlarge-grid-cols-18
grid-cols-19xsmall-grid-cols-19small-grid-cols-19medium-grid-cols-19large-grid-cols-19xlarge-grid-cols-19
grid-cols-20xsmall-grid-cols-20small-grid-cols-20medium-grid-cols-20large-grid-cols-20xlarge-grid-cols-20

CSS Variables

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

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

Examples

grid.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Grid / Layout</div>
    </div>
  </div>
  <div class="page-content grid-demo">
    <div class="block">
      <p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with
        pourcentage of screen you want.</p>
    </div>
    <div class="block-title">Columns with gap</div>
    <div class="block">
      <div class="grid grid-cols-2 grid-gap">
        <div>2 cols</div>
        <div>2 cols</div>
      </div>
      <div class="grid grid-cols-4 grid-gap">
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
      </div>
      <div class="grid grid-cols-3 grid-gap">
        <div>3 cols</div>
        <div>3 cols</div>
        <div>3 cols</div>
      </div>
      <div class="grid grid-cols-5 grid-gap">
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
      </div>
    </div>
    <div class="block-title">No gap between columns</div>
    <div class="block">
      <div class="grid grid-cols-2">
        <div>2 cols</div>
        <div>2 cols</div>
      </div>
      <div class="grid grid-cols-4">
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
      </div>
      <div class="grid grid-cols-3">
        <div>3 cols</div>
        <div>3 cols</div>
        <div>3 cols</div>
      </div>
      <div class="grid grid-cols-5">
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</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="grid grid-cols-1 medium-grid-cols-2 grid-gap">
        <div>1 col / medium 2 cols</div>
        <div>1 col / medium 2 cols</div>
      </div>
      <div class="grid grid-cols-2 medium-grid-cols-4 grid-gap">
        <div>2 col / medium 4 cols</div>
        <div>2 col / medium 4 cols</div>
        <div>2 col / medium 4 cols</div>
        <div>2 col / medium 4 cols</div>
      </div>
    </div>

  </div>
</div>
Improve this Doc
On this page