App Grid like Iphone / Android for web application

Question

I'm wanting to implement a "Iphone / Andriod" like home screen with various apps into a webpage like this:

(By the way it's ERPNext's front page)

Does anyone have any examples that I can build off of? I've tried to use cards however when they scale to mobile there in a single row which does not work for me if I have like 30 smaller app icons inside the page.

Answer 1

You would use a collection of divs that have been set to display as inline-block, here's an older answer with a JSFiddle that simulates what you're trying to achieve.

How to force inline-block elements to wrap?

The rest is just aesthetics and simple CSS.

EDIT: As of 2017 flexbox is the now standard way to go for achieving this goal.