Ionic Grid - Two buttons with different content but with the same size, side by side

I have an element which is a header with two buttons. I have the buttons organized in a ion-grid, where the two buttons are side by side with the same size and centered in the column. This way the size is perfect for mobiles, but the buttons are too big when using a browser:

<ion-header>
    <ion-toolbar>       
        <ion-grid>
            <ion-row>
                <ion-col size="6" class="ion-text-center">
                    <ion-button style="width: 75%;">Menu</ion-button>
                </ion-col>
                <ion-col size="6" class="ion-text-center">
                    <ion-button style="width: 75%;">Abcdefghijklmn</ion-button>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-toolbar>
    <style>html, body { margin: 0; }</style>
</ion-header>

I tried to change the min-width and max-width, but when it gets perfect for browser screen size it gets too small for mobile and the button became smaller then the text inside.

As suggested here, I tried to apply expand="full", class="ion-text-wrap" and set a max-width to the button, but it loses its center property defined by class="ion-text-center" on ion-col. I then added style="text-align: center" to maintain the center property in ion-col tag, but does not make difference`.

Stackblitz

Solution

You can make responsive grid like this. (You may adjust grid size for your use case)

Ref : https://ionicframework.com/docs/layout/grid#grid-size

<ion-grid>
    <ion-row>
        <ion-col size-sm="6" size="6" class="ion-text-center">
            <ion-button expand="full" class="ion-text-wrap min-max-width">Menu</ion-button>
        </ion-col>

        <ion-col size-sm="6" size="6" class="ion-text-center">
            <ion-button expand="full" class="ion-text-wrap min-max-width">Abcdefghijklmn</ion-button>
        </ion-col>
    </ion-row>
</ion-grid>

<style>
    .min-max-width {
        max-width: 200px;
        margin: 0 auto;
    }
</style>