grid-ionic

The grid system is introduced by Bootstrap. If you are familiar with Bootstrap, this section is easy. Grid is used to divide the width of the screen.

First, we must define a row and then add columns. Don’t bother about column width. It will automatically adjust itself depending on the available space. To achieve this use row and col classes. We can create as many columns in a row. It will automatically order column in a row and occupies space according to the row width. This grid concept in web design is called as responsive design. Ionic grid uses CSS Flexible Box Layout Module.

 

Evenly Spaced Columns

If we use col class inside row, all the column will occupy even space without mentioning the column size.


<div class="row">

<div class="col"> <button class="button button-calm">.col</button></div>

<div class="col"> <button class="button button-calm">.col</button></div>

<div class="col"> <button class="button button-calm">.col</button></div>

<div class="col"> <button class="button button-calm">.col</button></div>

<div class="col"> <button class="button button-calm">.col</button></div>

</div>

The five column will equally share 20% of width. The above example code contains only 5 columns. However, when you add 10 column in a row and each column has only the col class, the device do not have enough space to display all the columns. In Bootstrap, if you add many columns, the grid automatically align and move the columns to next row.

 

Explicit Column Sizes

We can mention column size explicitly using col-widthpercentage class. Have a look at the table below.

Explicit Column       Percentage Classnames

.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%


<div class="row gr">

<div class="col col-50">.col.col-50</div>

<div class="col">.col</div>

<div class="col">.col</div>

</div>


<div class="row gr">

<div class="col col-75">.col.col-75</div>

<div class="col">.col</div>

</div>


<div class="row gr">

<div class="col">.col</div>

<div class="col col-75">.col.col-75</div>

</div>


<div class="row gr">

<div class="col">.col</div>

<div class="col">.col</div>

</div>

Here gr is user defined class to see the occupied space. The code for gr


<style type="text/css">

    .gr div{

    padding: 5px;

width: 100%;

border: 1px solid #ddd;

border-radius: 2px;

background: #15ecd5;

text-align: center;

    }

</style>

 

Offset Columns

A col-offset class offers offset from left. You must specify the offset width.

Offset Column    Percentage Classnames

.col-offset-10      10%

.col-offset-20      20%

.col-offset-25      25%

.col-offset-33      33.3333%

.col-offset-50      50%

.col-offset-67      66.6666%

.col-offset-75      75%

.col-offset-80      80%

.col-offset-90      90%


<div class="row gr">

<div class="col col-33 col-offset-33">.col</div>

<div class="col">.col</div>

</div>


<div class="row gr">

<div class="col col-33">.col</div>

<div class="col col-33 col-offset-33">.col</div>

</div>


<div class="row gr">

<div class="col col-33 col-offset-67">.col</div>

</div>

 

Vertically Align columns

Flexbox offers vertical alignment in columns. Vertical alignment includes top, center, and bottom, and can be applied to every column in a row, or to a specific column.


<div class="row gr">

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">1<br>2<br>3<br>4</div>

</div>


<div class="row gr">

<div class="col col-top">.col</div>

<div class="col col-center">.col</div>

<div class="col col-bottom">.col</div>

<div class="col">1<br>2<br>3<br>4</div>

</div>


<div class="row gr row-top">

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">1<br>2<br>3<br>4</div>

</div>


<div class="row gr row-center">

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">1<br>2<br>3<br>4</div>

</div>


<div class="row gr row-bottom">

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">1<br>2<br>3<br>4</div>

</div>

 

Responsive Grid

Finally, we can discuss the responsive design in the mobile application. Mobile application needs responsive design, why because we have different mobile screen sizes. At the start of post we have seen that buttons are not displayed due to insufficient space. This can be addressed by using the responsive class with size(sm or md or lg).

Responsive Class     Break when roughly

.responsive-sm         Smaller than landscape phone

.responsive-md        Smaller than portrait tablet

.responsive-lg           Smaller than landscape tablet    


<div class="row gr responsive-sm">

<div class="col"> .col</div>

<div class="col"> .col</div>

<div class="col"> .col</div>

<div class="col"> .col</div>

<div class="col"> .col</div>

</div>