Some months ago a friend of mine asked me to help him reaching a grid template to include in a wordpress project he was working on. At the very first, we thought about using Twitter Bootstrap or some sort of templating css+js library. What was really annoying was the quantity of unnecessary code, for us, we were including to make it work.
Then I decided to make it possibly using only css3, even without javascript. Actually it was not necessary to be that strict with myself at all, but I like this kind of challenges. Plus, the idea of not using javascript (at least for default browser configuration) was really intriguing me.
So, here is the final result (click on the picture for the DEMO):
Fluid Grid Layout
Let’s have a look at the code (available on this GIT).
The HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<html> <head> <title>Test Grid</title> <meta name="description" content="A little example of a CSS3 fluid grid"> <meta name="author" content="Edoardo Odorico, edoardoo.com"> <meta name="viewport" content="width=device-width, user-scalable=no"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="floatingTitle"> <h1>FLUID CSS3 GRID EXAMPLE <span class="white">(Swim time!)</span></h1> </div> <!-- The container: --> <div id="main"> <!-- and here is the list of items: --> <div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div><div class="scatolo"> <img src="img.jpg"/> </div> </div> <div id="footer">CC-BY-SA Edoardo Odorico, <a href="http://edoardoo.com">Edoardoo.com</a>, <a href="http://hack.lenotta.com"><img src="logolenotta.png"/></a></div> </body> </html> |
NOTE: pay attention to the absence of a space between the scatolo divs. It’s really important. Otherwise you’ll note a white space between the boxes (an hour of debugging…).
The CSS:
The layout is set to display 4 boxes on full width and then scaling down to 3, 2 and 1 column, depending on window width.
I’ve used the magintastic @media properties to achieve this behaviour.
The other key that makes everything works is the
display: inline-block
of scatolo divs, which will make the boxes to stay close to each other, displayed in line.
And yes, no float divs around (ooooh yeah!).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
html, body{ height: 100%; width: 100%; margin: 0px; padding: 0px; position: relative; text-rendering: optimizelegibility; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } a, a:active, a:hover, a:visited{ color: #444; text-decoration: none; } #main{ position: relative; height: 100%; width: 100%; background: #111; } #floatingTitle{ position: fixed; margin: auto; top: .1em; z-index: 999; } #floatingTitle h1{ position: relative; color: #222; font-size: 3em; -webkit-margin-before:0; -webkit-margin-after:0; top: .5em; left: .5em; } .white{ color: #EEE; } .scatolo{ background:black; height: auto; width: auto; max-width: 25% ; overflow: hidden; display: inline-block; } .scatolo img{ width: 100%; -webkit-transition: all 0.3s ease-in-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: all 0.3s ease-in-out; /* Firefox 4-15 */ -o-transition: all 0.3s ease-in-out; /* Opera 10.50–12.00 */ transition: all 0.3s ease-in-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); -ms-transform: scale(1); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0, M12=-0, M21=0, M22=0); } .scatolo img:hover { opacity: .3; -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); transform: scale(2); -ms-transform: scale(2); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=2, M12=-0, M21=0, M22=2); -webkit-transition: all 0.3s ease-in-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: all 0.3s ease-in-out; /* Firefox 4-15 */ -o-transition: all 0.3s ease-in-out; /* Opera 10.50–12.00 */ transition: all 0.3s ease-in-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ } #footer{ position: fixed; z-index: 999; bottom: .5em; left: 1em; } #footer img{ bottom: -5px; position: relative; } @media all and (max-width:1024px){ .scatolo{ max-width: 33.333333%; } } @media all and (max-width:800px){ .scatolo{ max-width: 50%; } } @media all and (max-width:500px){ .scatolo{ max-width: 100%; } } |
A little zooming effect to make it funny (and useful for my friend work) and it’s all done.
Let me leave you with a question: what about make everything dirtier and achieve a super duper drag and drop?
Don’t forget to comment and share. All the code is under CC-BY-SA.
Have fun!
just one word….awesome! 😀