Test for reflowing grids using inline-block

AKA we will be so happy when flexbox is supported accross the board

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.

  • 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
  • Prevent 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.
  • Tested in all modern browsers and in IE >= 7 (slight float drops in IE7 upon window resize but I can live with that)
  • Uses selectivizr and respond to get support for CSS3 selectors and screen-size based media-queries in IE
  • Block 1

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 2

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 3

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis. Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 4

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 5

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 6

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 7

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 8

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 9

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 10

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis. Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis. Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 11

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis

  • Block 12

    Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis