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 below table:
| S.N. | 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 below example provides the grid layout for placing your content as you need in the 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> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"> <style> div[class*="col-"] { background: #fff; text-align: center; color: #000; border: 1px solid #D8D8D8; } .row { margin-bottom: 10px; } </style> </head> <body> <div class="views"> <div class="view view-main"> <div class="navbar"> <div class="navbar-inner"> <div class="center sliding">Layout Grid</div> </div> </div> <div class="pages"> <div data-page="index" class="page navbar-fixed"> <div class="page-content"> <div class="content-block-title">Columns with gutter</div> <div class="content-block"> <div class="row"> <div class="col-50">col 1</div> <div class="col-50">col 2</div> </div> <div class="row"> <div class="col-25">col 1</div> <div class="col-25">col 2</div> <div class="col-25">col 3</div> <div class="col-25">col 4</div> </div> <div class="row"> <div class="col-33">col 1</div> <div class="col-33">col 2</div> <div class="col-33">col 3</div> </div> </div> <div class="content-block-title">Columns without gutter</div> <div class="content-block"> <div class="row no-gutter"> <div class="col-50">col 1</div> <div class="col-50">col 2</div> </div> <div class="row no-gutter"> <div class="col-25">col 1</div> <div class="col-25">col 2</div> <div class="col-25">col 3</div> <div class="col-25">col 4</div> </div> <div class="row no-gutter"> <div class="col-33">col 1</div> <div class="col-33">col 2</div> <div class="col-33">col 3</div> </div> </div> <div class="content-block-title">Nested Columns</div> <div class="content-block"> <div class="row"> <div class="col-50"> col 1 <div class="row"> <div class="col-40">col 2</div> <div class="col-60">col 3</div> </div> </div> <div class="col-50"> col 1 <div class="row"> <div class="col-75">col 2</div> <div class="col-25">col 3</div> </div> </div> </div> </div> <div class="content-block-title">Columns With Different Equal Width</div> <div class="content-block"> <div class="row"> <div class="col-100 tablet-50">col 1</div> <div class="col-100 tablet-50">col 2</div> </div> <div class="row"> <div class="col-50 tablet-25">col 1</div> <div class="col-50 tablet-25">col 2</div> <div class="col-50 tablet-25">col 3</div> <div class="col-50 tablet-25">col 4</div> </div> <div class="row"> <div class="col-100 tablet-40">col 1</div> <div class="col-50 tablet-60">col 2</div> <div class="col-50 tablet-60">col 3</div> <div class="col-100 tablet-40">col 4</div> </div> </div> <div class="content-block-title">Columns With Equal Width</div> <div class="content-block"> <div class="row"> <div class="col-auto">col-1</div> <div class="col-auto">col-2</div> <div class="col-auto">col-3</div> <div class="col-auto">col-4</div> </div> <div class="row no-gutter"> <div class="col-auto">col-1</div> <div class="col-auto">col-2</div> <div class="col-auto">col-3</div> <div class="col-auto">col-4</div> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/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's carry out the following steps to see how above code works:- Save above HTML code as layout_grid.html file in your server root folder.
- Open this HTML file as http://localhost/layout_grid.html and output as below gets displayed.
- This code provides different types of grid types to place the content as per the user need.
No comments:
Post a Comment