Website use with grids

Ionic Framework ionic-v3
1

Please can I get input regarding the use of ionic components within a grid. I have struggled as it seems that components such as a list does not work. Since I am a newbie I would appreciate hearing from others.

I need to create a website using ionic and would make use of the grid to create margins when viewed on desktop. The entire app will then be built within the center column. Please can I have some advice before I start .

Thanks

2

What exactly doesn’t work with a list inside a grid? It works for me. See https://stackblitz.com/edit/ionic-mhzgqm?file=pages%2Fhome%2Fhome.html.

That being said, if all you need is a margin, it might be easier to just use something like this:

home.html:

<ion-content>
    <div class="my-content">
        <ion-list>
            <ion-item>
                ...
            </ion-item>
        </ion-list>
    </div>
</ion-content>

home.scss or app.scss:

// desktop
@media screen and (min-width: 1024px) {
    .my-content {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
    }
}
3

Thank you. I have found the issue.