# How to set ion-grid col width dynamically

**URL:** <https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045>\
**Category:** ionic-v3\
**Created:** [July 20, 2016, 9:55am UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045 "2016-07-20T09:55:17Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luffy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luffy/32/95812_2.png) [@Luffy](https://forum.ionicframework.com/u/Luffy)\
**Post date:** [July 20, 2016, 9:55am UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/1 "2016-07-20T09:55:17Z")

</div>

```
 <ion-grid>
   <ion-row>
     <ion-col [width]="theColWidth">This column will take of space dynamically</ion-col>
   </ion-row>
</ion-grid>

```

How can I set the col width dynamically like this?

this.theColWidth = ‘width-10’

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 20, 2016, 10:46am UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/2 "2016-07-20T10:46:07Z")

</div>

What I do in this case is not give it any width, and put an `ngIf` on the second `ion-col`.

Example:

```auto
<ion-row>
  <ion-col>This always shows up and takes whatever space left</ion-col>
  <ion-col *ngIf="hasData" width-80>This only shows up if we have data, and takes 80% of width.</ion-col>
</ion-row>

```

---

<div class="post-metadata">

**Author:** ![Luffy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luffy/32/95812_2.png) [@Luffy](https://forum.ionicframework.com/u/Luffy)\
**Post date:** [July 20, 2016, 10:54am UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/3 "2016-07-20T10:54:51Z")

</div>

In some cases I have tried with ngIf like your way, but in other cases, I need set col width dynamically.

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 20, 2016, 10:56am UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/4 "2016-07-20T10:56:44Z")

</div>

Just looked at the source code, looks like the grid is 100% SASS and it uses attributes (not classes). That means you can’t change it programmatically (AFAIK).

---

<div class="post-metadata">

**Author:** ![Luffy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luffy/32/95812_2.png) [@Luffy](https://forum.ionicframework.com/u/Luffy)\
**Post date:** [July 20, 2016, 1:49pm UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/5 "2016-07-20T13:49:52Z")

</div>

😅  
Wish Ionic team make it programmatically.😋

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 23, 2016, 8:48am UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/6 "2016-07-23T08:48:36Z")

</div>

I just did some quick search. Turns out you can set attributes dynamically with Angular 2.

So in your case it would look something like this:

```auto
<ion-grid>
  <ion-row>
    <ion-col [attr.width-20]="someBooleanValue"></ion-col>
    <ion-col *ngIf="someBooleanValue">Some other stuff</ion-col>
  </ion-row>
</ion-grid>

```

Also I think you can add multiple [attr.], just like how you can add multiple `[class.<class name>]` and `[style.<property name>]`

Reference: [http://stackoverflow.com/a/37498398](http://stackoverflow.com/a/37498398)

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 23, 2016, 12:59pm UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/7 "2016-07-23T12:59:15Z")

</div>

I got it to work, but it only works with CSS attributes, doesn’t work with Angular 2 component attributes (example: button colors or styles).

```auto
<ion-grid>
  <ion-row>
    <ion-col [attr.width-20]="someBooleanValue? true : null"></ion-col>
    <ion-col *ngIf="someBooleanValue">Some other stuff</ion-col>
  </ion-row>
</ion-grid>

```

When the value is null, Angular will remove the attribute completely. And when the value is true it will add `width-20="true"` which still works fine.

* * *

**Update:** it works with `<button>` too. But it only works with the defined inputs/attributes ( such as outline, solid, clear … etc [see here for more](https://github.com/driftyco/ionic/blob/2.0/src/components/button/button.ts) ).

The colors aren’t defined as attributes so you can add your custom colors (defined in `app.variables.sass`) to the button.

–

**Update #2** Nevermind 😁 … It works with the colors too. Just gotta use the `[color]` attribute on the color. I just saw [this](https://github.com/driftyco/ionic/blob/2.0/src/components/button/button.ts#L156-L164)

---

<div class="post-metadata">

**Author:** ![Luffy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luffy/32/95812_2.png) [@Luffy](https://forum.ionicframework.com/u/Luffy)\
**Post date:** [July 24, 2016, 1:39pm UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/8 "2016-07-24T13:39:35Z")

</div>

👍✌🖖👌

---

<div class="post-metadata">

**Author:** ![anatolys](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anatolys/32/96468_2.png) [@anatolys](https://forum.ionicframework.com/u/anatolys)\
**Post date:** [February 11, 2017, 9:52am UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/9 "2017-02-11T09:52:33Z")

</div>

@ihadeed, thank you so much for perfect workaround. What do you think this is bug or feature? Should it fixed?

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [February 11, 2017, 11:40pm UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/10 "2017-02-11T23:40:14Z")

</div>

I don’t think this is a bug. It’s just the way Angular 2 works.

---

<div class="post-metadata">

**Author:** ![melaniecarr23](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/melaniecarr23/32/130377_2.png) [@melaniecarr23](https://forum.ionicframework.com/u/melaniecarr23)\
**Post date:** [February 4, 2020, 8:05pm UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/11 "2020-02-04T20:05:05Z")

</div>

This is fantastic! I was able to use the`<ion-col [attr.size-lg]="some value === true ? 12 ? 6">` to dynamically change the column widths based on content and it’s AMAZING!!!

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:01pm UTC](https://forum.ionicframework.com/t/how-to-set-ion-grid-col-width-dynamically/58045/12 "2021-07-19T21:01:46Z")

</div>

Closed on July 19, 2021, 9:01pm UTC