Framework7 Tutorial
Framework7 Components
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
Framework7 Components
- Framework7 - Lazy Load
- Framework7 - Notifications
- Framework7 - Message Bar
- Framework7 - Messages
- Framework7 - Infinite Scroll
- Framework7 - Refresh
- Framework7 - Calendar
- Framework7 - Picker
- Framework7 - Autocomplete
- Framework7 - Photo Browser
- Framework7 - Swiper Slider
- Framework7 - Tabs
- Framework7 - Forms
- Framework7 - Action Button
- Framework7 - Buttons
- Framework7 - Chips
- Framework7 - Cards
- Framework7 - Accordion
- Framework7 - List Views
- Framework7 - Progress Bar
- Framework7 - Preloaders
- Framework7 - Overlays
- Framework7 - Layout Grid
- Framework7 - Content Block
- Framework7 - Side Panels
- Framework7 - Status Bar
- Framework7 - Search Bar
- Framework7 - Toolbars
- Framework7 - Navbars
- Framework7 - Layouts
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Framework7 - Layout Grid
Framework7 - Layout Grid
Description
Framework7 provides different types of grid types to place the content as per user need.
The layout grid provides different types of columns size as described in the following table −
| S.No | Class | Table Class | Width |
|---|---|---|---|
| 1 | col-5 | tablet-5 | 5% |
| 2 | col-10 | tablet-10 | 10% |
| 3 | col-15 | tablet-15 | 15% |
| 4 | col-20 | tablet-20 | 20% |
| 5 | col-25 | tablet-25 | 25% |
| 6 | col-30 | tablet-30 | 30% |
| 7 | col-33 | tablet-33 | 33.3% |
| 8 | col-35 | tablet-35 | 35% |
| 9 | col-40 | tablet-40 | 40% |
| 10 | col-45 | tablet-45 | 45% |
| 11 | col-50 | tablet-50 | 50% |
| 12 | col-55 | tablet-55 | 55% |
| 13 | col-60 | tablet-60 | 60% |
| 14 | col-65 | tablet-65 | 65% |
| 15 | col-66 | tablet-66 | 66.6% |
| 16 | col-70 | tablet-70 | 70% |
| 17 | col-75 | tablet-75 | 75% |
| 18 | col-80 | tablet-80 | 80% |
| 19 | col-85 | tablet-85 | 85% |
| 20 | col-90 | tablet-90 | 90% |
| 21 | col-95 | tablet-95 | 95% |
| 21 | col-100 | tablet-100 | 100% |
| 22 | col-auto | tablet-auto | Equal width |
Example
The following example provides the grid layout for placing your content as you need in Framework7 −
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Layout Grid</title>
<pnk rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
<pnk rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<style>
span[class* = "col-"] {
background: #fff;
text-apgn: center;
color: #000;
border: 1px sopd #D8D8D8;
}
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<span class = "views">
<span class = "view view-main">
<span class = "navbar">
<span class = "navbar-inner">
<span class = "center spding">Layout Grid</span>
</span>
</span>
<span class = "pages">
<span data-page = "index" class = "page navbar-fixed">
<span class = "page-content">
<span class = "content-block-title">Columns with gutter</span>
<span class = "content-block">
<span class = "row">
<span class = "col-50">col 1</span>
<span class = "col-50">col 2</span>
</span>
<span class = "row">
<span class = "col-25">col 1</span>
<span class = "col-25">col 2</span>
<span class = "col-25">col 3</span>
<span class = "col-25">col 4</span>
</span>
<span class = "row">
<span class = "col-33">col 1</span>
<span class = "col-33">col 2</span>
<span class = "col-33">col 3</span>
</span>
<span class = "content-block-title">Columns without gutter</span>
<span class = "content-block">
<span class = "row no-gutter">
<span class = "col-50">col 1</span>
<span class = "col-50">col 2</span>
</span>
<span class = "row no-gutter">
<span class = "col-25">col 1</span>
<span class = "col-25">col 2</span>
<span class = "col-25">col 3</span>
<span class = "col-25">col 4</span>
</span>
<span class = "row no-gutter">
<span class = "col-33">col 1</span>
<span class = "col-33">col 2</span>
<span class = "col-33">col 3</span>
</span>
</span>
<span class = "content-block-title">Nested Columns</span>
<span class = "content-block">
<span class = "row">
<span class = "col-50">
col 1
<span class = "row">
<span class = "col-40">col 2</span>
<span class = "col-60">col 3</span>
</span>
</span>
<span class = "col-50">
col 1
<span class = "row">
<span class = "col-75">col 2</span>
<span class = "col-25">col 3</span>
</span>
</span>
</span>
</span>
<span class = "content-block-title">Columns With Different Equal Width</span>
<span class = "content-block">
<span class = "row">
<span class = "col-100 tablet-50">col 1</span>
<span class = "col-100 tablet-50">col 2</span>
</span>
<span class = "row">
<span class = "col-50 tablet-25">col 1</span>
<span class = "col-50 tablet-25">col 2</span>
<span class = "col-50 tablet-25">col 3</span>
<span class = "col-50 tablet-25">col 4</span>
</span>
<span class = "row">
<span class = "col-100 tablet-40">col 1</span>
<span class = "col-50 tablet-60">col 2</span>
<span class = "col-50 tablet-60">col 3</span>
<span class = "col-100 tablet-40">col 4</span>
</span>
</span>
<span class = "content-block-title">Columns With Equal Width</span>
<span class = "content-block">
<span class = "row">
<span class = "col-auto">col-1</span>
<span class = "col-auto">col-2</span>
<span class = "col-auto">col-3</span>
<span class = "col-auto">col-4</span>
</span>
<span class = "row no-gutter">
<span class = "col-auto">col-1</span>
<span class = "col-auto">col-2</span>
<span class = "col-auto">col-3</span>
<span class = "col-auto">col-4</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView( .view-main );
</script>
</body>
</html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as layout_grid.html file in your server root folder.
Open this HTML file as http://localhost/layout_grid.html the output is displayed as shown below.
This code provides different types of grid types to place the content as per the user need.