Fit last item in grid to same space as others [CSS]

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:

image1918×315 16.6 KB

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

5 posts - 2 participants

Read full topic