card table

An investigation into responsive card layouts.

Layout of cards is derived by a choosing a minimum width for the card.

Please vary your browser’s viewport width to see the responsive behaviour.

N.B. I built this in 2016 using Flexbox, in 2019 I would recommend using CSS Grid instead.

  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  1. Primary
  2. Secondary
  3. Tertiary
  4. Quaternary
  5. Quinary
  6. Senary
  1. Primary
  2. Secondary
  3. Tertiary
  4. Quaternary
  5. Quinary
  6. Senary
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive

Alternate order 01

  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  1. Primary
  2. Secondary
  3. Tertiary
  4. Quaternary
  5. Quinary
  6. Senary

But though I was so terrified by the idea of the seafaring man with one leg, I was far less afraid of the captain himself than anybody else who knew him.

There were nights when he took a deal more rum and water than his head would carry; and then he would sometimes sit and sing his wicked, old, wild sea-songs, minding nobody; but sometimes he would call for glasses round and force all the trembling company to listen to his stories or bear a chorus to his singing.

Often I have heard the house shaking with "Yo-ho-ho, and a bottle of rum," all the neighbours joining in for dear life, with the fear of death upon them, and each singing louder than the other to avoid remark.

  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive

Alternate order 02

  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  1. Primary
  2. Secondary
  3. Tertiary
  4. Quaternary
  5. Quinary
  6. Senary
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive
  • Perspicacious
  • Salience
  • Clemency
  • Effervescence
  • Erudition
  • Effusive

Alternate order 03