-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Lazy Modules
-
Custom Build
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:
Class | Tablet Class width >= 768px |
Desktop Class width >= 1025px |
Width |
---|---|---|---|
col-5 | tablet-5 | desktop-5 | 5% |
col-10 | tablet-10 | desktop-10 | 10% |
col-15 | tablet-15 | desktop-15 | 15% |
col-20 | tablet-20 | desktop-20 | 20% |
col-25 | tablet-25 | desktop-25 | 25% |
col-30 | tablet-30 | desktop-30 | 30% |
col-33 | tablet-33 | desktop-33 | 33.333333333333336% |
col-35 | tablet-35 | desktop-35 | 35% |
col-40 | tablet-40 | desktop-40 | 40% |
col-45 | tablet-45 | desktop-45 | 45% |
col-50 | tablet-50 | desktop-50 | 50% |
col-55 | tablet-55 | desktop-55 | 55% |
col-60 | tablet-60 | desktop-60 | 60% |
col-65 | tablet-65 | desktop-65 | 65% |
col-66 | tablet-66 | desktop-66 | 66.66666666666666% |
col-70 | tablet-70 | desktop-70 | 70% |
col-75 | tablet-75 | desktop-75 | 75% |
col-80 | tablet-80 | desktop-80 | 80% |
col-85 | tablet-85 | desktop-85 | 85% |
col-90 | tablet-90 | desktop-90 | 90% |
col-95 | tablet-95 | desktop-95 | 95% |
col-100 | tablet-100 | desktop-100 | 100% |
col | tablet-auto | desktop-auto | Equal width |
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 tablet-50">.col-100.tablet-50</div>
<div class="col-100 tablet-50">.col-100.tablet-50</div>
</div>
<div class="row">
<div class="col-50 tablet-25">.col-50.tablet-25</div>
<div class="col-50 tablet-25">.col-50.tablet-25</div>
<div class="col-50 tablet-25">.col-50.tablet-25</div>
<div class="col-50 tablet-25">.col-50.tablet-25</div>
</div>
<div class="row">
<div class="col-100 tablet-40">.col-100.tablet-40</div>
<div class="col-50 tablet-60">.col-50.tablet-60</div>
<div class="col-50 tablet-66">.col-50.tablet-66</div>
<div class="col-100 tablet-33">.col-100.tablet-33</div>
</div>
</div>