“Grid layout” is a frequently used technique in web design. It’s essential when you want to neatly organize and display images or content.
However, creating this from scratch can be a bit challenging for some.
This article explains how to create a responsive grid layout easily using the jQuery plugin “freewall.js”.
We’ve also included ready-to-use source code and a demo link, so feel free to try it out!
What is freewall.js?
freewall.js is a jQuery plugin that allows you to easily create responsive grid layouts. It evenly arranges images and text, and dynamically adjusts the layout based on the device size.
By using this plugin, you can save time on manual layout adjustments and efficiently build visually appealing web pages.
Basic Setup
To use freewall.js, prepare the following two files:
- jQuery (version 1.10.2 or higher recommended)
- freewall.js (can be downloaded from the official site)
Once downloaded from the official site, set these files to load in your HTML file.
Required CSS
First, define the basic styles. Apply the CSS below to style the grid layout (.free-wall).
<style>
body {
margin: 20px 10px;
padding: 0;
font-size: 14px;
text-align: center;
}
h1{
text-align: center;
font-size: 22px;
line-height: 2em;
padding-bottom: 20px;
}
.free-wall {
margin: 15px;
}
</style>
HTML Structure
Next, define the HTML structure. The code below prepares the elements for grid display.
Create the grid output area with id="freewall".
<h1>Grid Layout Using freewall.js</h1>
<div id="freewall" class="free-wall"></div>
JavaScript Implementation of Grid Layout Using freewall.js
Lastly, write the JavaScript code that uses freewall.js.
Load the jquery-1.10.2.min.js and freewall.js files. Using a for loop, generate grid items (class='cell') inside the target area #freewall.
In this example, we display pre-prepared jpg images (1–5.jpg) in the grid cells.
Here is a basic example of grid construction.
<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./freewall.js"></script>
<script type="text/javascript">
var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(./{index}.jpg)'></div>";
var w = 200, h = 200, html = '', limitItem = 5;
for (var j = 0; j < limitItem; ++j) {
for (var i = 0; i < limitItem; ++i) {
html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1);
}
}
$("#freewall").html(html);
var wall = new Freewall("#freewall");
wall.reset({
selector: '.cell',
animate: true,
cellW: 200,
cellH: 200,
onResize: function() {
wall.refresh();
}
});
wall.fitWidth();
// for scroll bar appear;
$(window).trigger("resize");
</script>
Demo Page: Grid Layout Using freewall.js
If you’d like to see it in action, please refer to the demo page below.
Demo Page of Grid Layout Using freewall.js
Source: Freewall – jQuery plugin for creating grid layouts
Here is the source link:
Freewall – jQuery plugin for creating grid layouts
Conclusion
By using freewall.js, you can easily create complex grid layouts. It’s highly recommended as it enables responsive and beautiful designs effortlessly.
Try customizing the code to build your own unique layout!
※ Use at your own risk.
Please do not reuse the Google Analytics tag inside the demo page’s <head> section.
