0

Hello I would like to make a layout where by tiles (1x1, 1x2, and 2x2) fill a grid, and when you click one of the tiles it expands to a larger window and fits into a larger area within the tiles surrounding it.

Here is an example of what I mean http://village.marimekko.com/

Can anyone suggest a best practise for doing this, I had hoped to just use a theme but I can't find anything quite right!

Many thanks,

Simon Paffage
  • 15
  • 2

1 Answers1

2

I'd suggest you take a look at Isotope which will take care of the layout for you pretty nice. For the expanding part, it's just a matter to expand the container to a larger size; Isotope will re-layout automatically.

Eric
  • 18,532
  • 2
  • 34
  • 39
  • Thank you, what would you suggest for the resizing? Jquery/JS? It just needs to be an instant transition probably. – Simon Paffage Feb 11 '15 at 16:22
  • Define it in your css with one class for each size: `.small {width:10px; height:10px;}` `.medium {width:10px; height:20px;}` and so on. Ideally you want to have it responsive (using `%` instead of `px`). Then you switch classes upon click. – Eric Feb 11 '15 at 16:38