Ion-Grid row getting put on multiple lines

[BLACKSHiRTSQUAD]

See the two images below. At 472 width it displays correctly, but as soon as I go lower a single ion-row displays as two rows. Why isn’t it just shrinking to fit? From the ionic documentation on grids, it makes it sounds like it should.

The layout is very simple with no extra options or css.

<ion-footer>
  <ion-grid>
    <ion-row>
      <ion-col>
        button 1 content
      </ion-col>
      <ion-col>
        button 2 content
      </ion-col>
    </ion-row>
  <ion-grid>
</ion-footer>

! note - this is using ionic-react, but i think the question applies generally

[mariusbolik]

Hello,

normally you do not need to place Buttons inside a Grid to place them side by side. This should do the same:

<ion-button>Button 1</ion-button>
<ion-button style="float: right;">Button 2</ion-button>

[BLACKSHiRTSQUAD]

Wow, thank you! Ugh that was so easy, I was messing around for hours with combinations of ion-item and slots and grid