SponsorsBecome a sponsor
- Get Started
- Events
- Router / Navigation
- Store
- Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Area Chart
- Autocomplete
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Color Picker
- Contacts List
- Data Table
- Dialog
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Treeview
- View / Router
- Virtual List
- Framework7 Icons
- Styling
- Dom7
- Touch Utilities
- 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
<!-- 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>