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 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
andmax-width
CSS properties specified - To limit rows min/max size (height), they must have
min-height
andmax-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 .theme-dark,
:root.theme-dark {
--f7-grid-resize-handler-bg-color: rgba(255, 255, 255, 0.35);
}
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: 16px;
font-size: 12px;
}
.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;
}
<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>