WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Grid


Ionic Grid System is straightforward. There are two main classes – row for working with rows and col for columns.All of them will adjust its size to accommodate the available space, although you can change this behavior to suit your needs.

Simple Grid

The following example shows how to use the col and the row classes. We will create two rows. The first row will have five columns and the second one will have only three
<div class = "row">
    <div class = "col">col 1</div>
    <div class = "col">col 2</div>
    <div class = "col">col 3</div>
    <div class = "col">col 4</div>
    <div class = "col">col 5</div>
</div>

<div class = "row">
    <div class = "col">col 1</div>
    <div class = "col">col 2</div>
    <div class = "col">col 3</div>
</div>

Column Sizes

col prefix followed by a number that will represent a percentage of the row width. In the following example, the first column will use 50 percent of the full width and the others will adjust accordingly.
<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>
The following table shows the available percentage options that Ionic grid system provides
Class Name Percentage Used
col-10 10%
col-20 20%
col-25 25%
col-33 33.3333%
col-50 50%
col-67 66.6666%
col-75 75%
col-80 80%
col-90 90%

Horizontal and Vertical Positioning

It works the same for the specific size of the columns. This time the prefix will be col-offset and then we will use the same percentage numbers showed in the table above.
<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
</div>
In the example that follows we added “.col {height: 120px}” to our CSS to show you the vertical placing of the columns.
<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
</div>

Responsive Grid

responsive-sm class will collapse columns into a single row when the viewport is smaller than a landscape phone. The responsive-md class will be applied when viewport is smaller than a portrait tablet. The responsive-lg class will be applied when viewport is smaller than a landscape tablet. responsive-sm class looks on a Mobile device and the second one shows how the same responsive grid looks differently on a Tablet device.
<div class = "row responsive-sm">
   <div class = "col col-25">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row responsive-sm">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>
Two type Grid View

Mobile Grid View

Tablet Grid View


Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com