The Ionic Grid System is FlexBox-based (Flexible Box). The Flexbox Layout module provides more efficient way to lay out, align, and distribute space among items in a container even when the size of the items are unknown or dynamic.
The advantage of using FlexBox-based Grid System is that it is not fixed-column grid system, that means you can define as many columns in a row and they will be automatically assigned with equal widths. The flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
Example : Row with Four Column
<ion-content>
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
<div class="col">col4</div>
</div>
</ion-content>
Row with Three Column
<ion-content>
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
</ion-content>
As you can see in the above code we do not have to do the counting, all we need to do is to add the cols that you want to use and they are automatically allocated with the equal widths. The above counting will happen only when you do not apply custom widths to the columns.
Lets say in the above example you want one column of 20 percent width, and other 2 columns to take the remaining width. Then all you need to do is to add a class named col-40 to the first div as shown below.
<ion-content>
<div class="row">
<div class="col col-20">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
</ion-content>
The predefined classes of columns are .col-10 (10 Percent Width), .col-20 (20 Percent Width), .col-25 (25 Percent Width), .col-33 (33.3333 Percent Width), .col-50 (50 Percent Width), .col-67 (66.6666 Percent Width), .col-75 (75 Percent Width), .col-80 (80 Percent Width), .col-90 (90 Percent Width). Along with the above classes, you can also add your own classes to get the required percentage.
Please Like and Share CodingDefined.com Blog, if you find it interesting and helpful.
The advantage of using FlexBox-based Grid System is that it is not fixed-column grid system, that means you can define as many columns in a row and they will be automatically assigned with equal widths. The flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
Example : Row with Four Column
<ion-content><div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
<div class="col">col4</div>
</div>
</ion-content>
Row with Three Column
<ion-content><div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
</ion-content>
As you can see in the above code we do not have to do the counting, all we need to do is to add the cols that you want to use and they are automatically allocated with the equal widths. The above counting will happen only when you do not apply custom widths to the columns.
Lets say in the above example you want one column of 20 percent width, and other 2 columns to take the remaining width. Then all you need to do is to add a class named col-40 to the first div as shown below.
<div class="row">
<div class="col col-20">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
</ion-content>
The predefined classes of columns are .col-10 (10 Percent Width), .col-20 (20 Percent Width), .col-25 (25 Percent Width), .col-33 (33.3333 Percent Width), .col-50 (50 Percent Width), .col-67 (66.6666 Percent Width), .col-75 (75 Percent Width), .col-80 (80 Percent Width), .col-90 (90 Percent Width). Along with the above classes, you can also add your own classes to get the required percentage.
Please Like and Share CodingDefined.com Blog, if you find it interesting and helpful.
No comments:
Post a Comment