I’m trying to make a page that show some items as a grid when the user is using the web app and the same items as a list when using in the mobile app. For this I used the example of this tutorial in Ionic’s blog.
The main problem is that the last item in the grid is showing as a full size item in larger screens:
Another problem is that I configured the column to show a maximum of 4 items in larger screens, but it is showing 5.
Here is what I did:
<ion-grid>
<ion-row>
<ion-col *ngFor="let project of projects" col-xs-12 col-xl-3 col-lg-4 col-md-6>
<ion-item lines="none" class="project-item">
<ion-thumbnail slot="start" (click)="openMap(project.projectId, project.name, project.area, project.date)">
<img src="assets/images/project.png">
</ion-thumbnail>
<ion-label>
<h2>{{project.name}}</h2>
<p>{{project.user}} • {{project.date}}</p>
</ion-label>
<ion-button clear slot="end">Opções</ion-button>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
Where, according to the blog article (modified in my code, maybe this is the problem?):
col-12: If no other rules match, the column will take all 12 units
col-md-4: At a minimum width of 768px, each column will only use 4 units. This means, a row can now handle 3 columns
col-lg-3: As the screen gets bigger than 992px, a column only needs 3 units which means the row now holds 4 columns
col-xl-2: On the largest screens (1200px+), a column only needs 2 units and a row will display 6 columns
3 posts - 2 participants