# How to create tree view using grid system

**URL:** <https://forum.ionicframework.com/t/how-to-create-tree-view-using-grid-system/218295>\
**Category:** Ionic Framework\
**Created:** [December 12, 2021, 12:57pm UTC](https://forum.ionicframework.com/t/how-to-create-tree-view-using-grid-system/218295 "2021-12-12T12:57:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![flycoders\_sourav](https://avatars.discourse-cdn.com/v4/letter/f/e47c2d/32.png) [@flycoders\_sourav](https://forum.ionicframework.com/u/flycoders_sourav)\
**Post date:** [December 12, 2021, 12:57pm UTC](https://forum.ionicframework.com/t/how-to-create-tree-view-using-grid-system/218295/1 "2021-12-12T12:57:03Z")

</div>

I want to make a tree view using grid system below my example, please can anyone help me with that.

 ![Screenshot_1](https://global.discourse-cdn.com/ionicframework/original/3X/f/7/f7cce1248a990c2b6940ef4f1d5d2e8dc96032c5.jpeg)

---

<div class="post-metadata">

**Author:** ![mikrochipkid](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mikrochipkid/32/116956_2.png) [@mikrochipkid](https://forum.ionicframework.com/u/mikrochipkid)\
**Post date:** [December 12, 2021, 4:57pm UTC](https://forum.ionicframework.com/t/how-to-create-tree-view-using-grid-system/218295/2 "2021-12-12T16:57:30Z")

</div>

this is explained in the docs:

> **[Ion-Grid: Display Grids to Build Mobile-First Custom App Layout | Ionic...](https://ionicframework.com/docs/api/grid)**
>
> Ion-Grid is a mobile-first flexbox system to build custom application display layouts with a 12 column layout and different breakpoints based on screen size.

---

<div class="post-metadata">

**Author:** ![flycoders\_sourav](https://avatars.discourse-cdn.com/v4/letter/f/e47c2d/32.png) [@flycoders\_sourav](https://forum.ionicframework.com/u/flycoders_sourav)\
**Post date:** [December 12, 2021, 5:03pm UTC](https://forum.ionicframework.com/t/how-to-create-tree-view-using-grid-system/218295/3 "2021-12-12T17:03:24Z")

</div>

thanks for you reply @mikrochipkid i saw but i want to make a tree view which i have mention above please can you suggest me how can i do that

---

<div class="post-metadata">

**Author:** ![mikrochipkid](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mikrochipkid/32/116956_2.png) [@mikrochipkid](https://forum.ionicframework.com/u/mikrochipkid)\
**Post date:** [December 12, 2021, 5:36pm UTC](https://forum.ionicframework.com/t/how-to-create-tree-view-using-grid-system/218295/4 "2021-12-12T17:36:17Z")

</div>

by giving each col the desired size. so the first one would be something like:

```auto
<ion-row>
    <ion-col size="10"></ion-col>
    <ion-col size="1"></ion-col>
    <ion-col size="1"></ion-col>
</ion-row>

```