Ion-grid stops breaking out when ngx-translate is used. A bug?

This code works


As long as I put static text here, no matter what language, it works perfectly the layout. it displays four cards a row and breaks out to two on smaller screen and to one on mobile phones.

ngx-translate is used and ion-grid doesn’t break out anymore:

(sorry, I use the screenshot here which is different than above just to show the result):
English:
broken_en

It looks even worse when switching to Chinese:
broken_cn

I’ve tested many times, once starting using ngx-translate, ion-grid doesn’t know what’s the right thing to do anymore. Is it a bug or I am doing things wrong here. If it’s a bug, I will fire a bug report. You can easily replay this by creating a simple ionic project and try to use ngx-translate.

my env:
$ ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

local packages:

@ionic/app-scripts : 3.1.6
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.9.1
npm  : 5.5.1
OS   : macOS Sierra

Misc:

backend : pro

Anyone can help with fixing this?