Responsive Grid Layout

March 15, 2013

With the increasing number of devices with different screen resolutions, having clearly in mind which resolutions to take into account with a responsive design is not so easy. And curiously, I spent a lot of time to find such a responsive grid layout. Here is a grid I made with the most common screen resolutions I use in responsive web design.

Medias Queries

  • 0 to 399px - iPhone portrait
  • 400 to 539px - iPhone landscape, most android phones portrait
  • 540 to 759px - Most android phone landscape
  • 760 to 959px - iPad portrait, most android tablets landscape
  • 960 to 1020px - iPad landscape, most android tablets landscape
  • 1021 to 1249px - Desktop small screen
  • 1250 to 1899px - Desktop medium screen
  • + 1900px - Desktop big screen and multi-screens

Enjoyed the article?

I'm sharing what I build and learn on SaaS products strategy and SaaS distribution. And I'm learning a lot, so will you! Delivered once a month for free.

I won't spam you or sell your address. Unsubscribe - of course - at any time.