Create a liquid grid design
Turn a conventional blog layout into a scripted, truly liquid grid that can handle different sized blocks of content. Ben Wise shows you how.
JavaScript frameworks are becoming increasingly essential in creating a rich user experience on the web.
jQuery and its cousins have come on leaps and bounds over the past few years, fixing a large number of common browser incompatibilities and speeding up code development. Beyond their original use for AJAX-style functionality, they've become useful tools in generating ambitious layouts impossible in traditional HTML.
This tutorial will take you through the process of enhancing a traditional HTML page with a scripted liquid grid layout. The script will take a range of different-sized content blocks and neatly fit them on screen, and even redraw when the window size changes. Don't be frightened; thanks to jQuery and its plug-ins, this boils down to one or two lines of code.
Click here to download the support files (746KB)
Click here to download the tutorial for free
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.