ion-grid doesn't render correctly in ion-item

[norbertbede]

Bug Report

Ionic version:

[x] 4.x RC1

Current behavior:
ion-grid doesn't render grid layout - all columns are centered

Expected behavior:
ion-grid must have same behavior inside ion-item as normally/without

our business app v3 example

Steps to reproduce:

1. create ionic4 rc1 project
2. add bellow code
3. see result

Related code:

    <ion-item > 
        <ion-grid >
            <ion-row >
              <ion-col>
                <div>
                  1 of 2
                </div>
              </ion-col>
              <ion-col>
                <div>
                  2 of 2
                </div>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <div>
                  1 of 3
                </div>
              </ion-col>
              <ion-col>
                <div>
                  2 of 3
                </div>
              </ion-col>
              <ion-col>
                <div>
                  3 of 3
                </div>
              </ion-col>
            </ion-row>
          </ion-grid>
      </ion-item>

Other information:

this is important to create complex business applications with many informations - in master detail mode - eg. inventory countlist and their lines. (product code, name, qty, location...etc.) grid allow organise it in v3 well.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.7.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v10.13.0 (/usr/local/bin/node)
   npm    : 6.5.0
   OS     : macOS [Mojave]

[abennouna]

You may want to apply a full width on the ion-grid as a workaround.

[brandyscarney]

Content in an ion-item is now required to be wrapped in an ion-label. In v4 we do less "magic" to an item, so we are no longer placing it in the label for you. Please see the breaking changes for more information: https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#label-required

Here is a codepen that shows your example with a label wrapper: https://codepen.io/brandyscarney/pen/MZLwzR

Thanks!

[brandyscarney]

Actually the more I think about it maybe grid should be an exception to this rule - maybe we can just add flex: 1 to the ion-grid and if that has no negative effects we could allow this markup to work. Thoughts @manucorporat?

[trazek]

@brandyscarney I'll make your recommended change and see if anything odd crops up

[trazek]

@brandyscarney I checked the visual tests in core and didn't see any negative impact of adding this style.

#17258

[brandyscarney]

@trazek Awesome, thank you! I will take a look!