Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Reflowing grid using display:inline-block
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
img
js
README.md
index.html

README.md

Description:

The aim of this test is to have a grid of items using media queries to change the number of items displayed per row depending on the available screen space. Using floats was not an option, since we have to support items of various lengths. Here is an online test case.

  • Uses display:inline-block; and media queries
  • Reflows depending on the available width (4 items per row > 3 items per row > 2 items per row)
  • Plays nice with items of various lengths
  • Alleviates the whitespace bug between items. If you really want to be on the safe side here, use HTML comments to eliminate whitespace or block your begin and end tags together. As a safety net, I also use the font-size:0 then restore trick (see code).
  • Tested in all modern browsers and in IE >= 7 (slight float drops in IE7 upon window resize caused by sub-pixel rounding but I can live with that)
  • Uses selectivizr.js and respond.js to get support for CSS3 selectors and screen-size based media-queries in IE >=7
Something went wrong with that request. Please try again.