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:

Class	xsmall `width >= 480px`	small `width >= 568px`	medium `width >= 768px`	large `width >= 1024px`	xlarge `width >= 1200px`
grid-cols-1	xsmall-grid-cols-1	small-grid-cols-1	medium-grid-cols-1	large-grid-cols-1	xlarge-grid-cols-1
grid-cols-2	xsmall-grid-cols-2	small-grid-cols-2	medium-grid-cols-2	large-grid-cols-2	xlarge-grid-cols-2
grid-cols-3	xsmall-grid-cols-3	small-grid-cols-3	medium-grid-cols-3	large-grid-cols-3	xlarge-grid-cols-3
grid-cols-4	xsmall-grid-cols-4	small-grid-cols-4	medium-grid-cols-4	large-grid-cols-4	xlarge-grid-cols-4
grid-cols-5	xsmall-grid-cols-5	small-grid-cols-5	medium-grid-cols-5	large-grid-cols-5	xlarge-grid-cols-5
grid-cols-6	xsmall-grid-cols-6	small-grid-cols-6	medium-grid-cols-6	large-grid-cols-6	xlarge-grid-cols-6
grid-cols-7	xsmall-grid-cols-7	small-grid-cols-7	medium-grid-cols-7	large-grid-cols-7	xlarge-grid-cols-7
grid-cols-8	xsmall-grid-cols-8	small-grid-cols-8	medium-grid-cols-8	large-grid-cols-8	xlarge-grid-cols-8
grid-cols-9	xsmall-grid-cols-9	small-grid-cols-9	medium-grid-cols-9	large-grid-cols-9	xlarge-grid-cols-9
grid-cols-10	xsmall-grid-cols-10	small-grid-cols-10	medium-grid-cols-10	large-grid-cols-10	xlarge-grid-cols-10
grid-cols-11	xsmall-grid-cols-11	small-grid-cols-11	medium-grid-cols-11	large-grid-cols-11	xlarge-grid-cols-11
grid-cols-12	xsmall-grid-cols-12	small-grid-cols-12	medium-grid-cols-12	large-grid-cols-12	xlarge-grid-cols-12
grid-cols-13	xsmall-grid-cols-13	small-grid-cols-13	medium-grid-cols-13	large-grid-cols-13	xlarge-grid-cols-13
grid-cols-14	xsmall-grid-cols-14	small-grid-cols-14	medium-grid-cols-14	large-grid-cols-14	xlarge-grid-cols-14
grid-cols-15	xsmall-grid-cols-15	small-grid-cols-15	medium-grid-cols-15	large-grid-cols-15	xlarge-grid-cols-15
grid-cols-16	xsmall-grid-cols-16	small-grid-cols-16	medium-grid-cols-16	large-grid-cols-16	xlarge-grid-cols-16
grid-cols-17	xsmall-grid-cols-17	small-grid-cols-17	medium-grid-cols-17	large-grid-cols-17	xlarge-grid-cols-17
grid-cols-18	xsmall-grid-cols-18	small-grid-cols-18	medium-grid-cols-18	large-grid-cols-18	xlarge-grid-cols-18
grid-cols-19	xsmall-grid-cols-19	small-grid-cols-19	medium-grid-cols-19	large-grid-cols-19	xlarge-grid-cols-19
grid-cols-20	xsmall-grid-cols-20	small-grid-cols-20	medium-grid-cols-20	large-grid-cols-20	xlarge-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

Grid Layout
Column Sizes
CSS Variables
Examples