Clever Geek Handbook

Variable-size layout tiles with no tables, filling empty space

I want to create a page layout that is similar to the following

############  #####  #####  #####
############  #####  #####  #####
############  #####  #####  #####
############ 
############  #####  ############
############  #####  ############
############  #####  ############
                     ############
#####  ############  ############
#####  ############  ############
#####  ############  ############
#####  
#####  #####  ############  #####
#####  #####  ############  #####
#####  #####  ############  #####

Wrong layout for sure , this is just an example. The idea consists of 1x1 tiles mixed with 1x2, 2x1 and 2x2 tiles, with the ability to mix and match my heart's content. This means filling up free space.

I can do this quite easily with tables. But then he doesn't react. I tried to use float: left

but there is a rule: the floated element will not appear to the left of the previously placed element. This means that when I try to create the above layout, I get holes, for example:

############  #####  #####  #####
############  #####  #####  #####
############  #####  #####  #####
############ 
############  #####  ############
############  #####  ############
############  #####  ############
                     ############
                     ############
                     ############
                     ############

#####  ############  #####   
#####  ############  #####    
#####  ############  #####  
#####
#####  ############  #####
#####  ############  #####
#####  ############  #####

What's the correct, modern, responsive way to do something like what I am trying to do?

+3


source to share


2 answers


What I am trying to do cannot be accomplished with float: left. But it can be done with JavaScript and there is already a library out there that integrates easily, which works great:



http://packery.metafizzy.co/

0


source


It looks like you are trying to do two different things. First, have liquid columns. Two to increase or decrease the number of columns depending on the screen size.



You can achieve fluid columns using percentage or min-width / max-width instead of pixel value. After that, you can add media queries to change the layout based on the size of the browsing browser. It is up to you where you want to set the breakpoints.

0


source






More articles:


All Articles