Ion-Grid row getting put on multiple lines

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.

        button 1 content
        button 2 content

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


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>

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