How to create responsive grid layout system in html with vanilla javascript plugin
How to create responsive grid layout system in html with vanilla javascript plugin
In this post i show how to make a complete responsive gride sysytem in website page with the help of html and Magic-Grid vanilla javascript library
Magic-Grid is an open source vanilla javascript library on github .
About
A simple, lightweight Javascript library for dynamic grid layouts.
Full Setup Source Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{background: black;}
img{
border: 3px solid #ccc;
}
</style>
</head>
<body>
<div id="container">
<img src="https://picsum.photos/400/300?random=1" alt="">
<img src="https://picsum.photos/400/200?random=2" alt="">
<img src="https://picsum.photos/400/500?random=3" alt="">
<img src="https://picsum.photos/400/400?random=4" alt="">
<img src="https://picsum.photos/400/350?random=5" alt="">
<img src="https://picsum.photos/400/250?random=6" alt="">
<img src="https://picsum.photos/400/450?random=7" alt="">
<img src="https://picsum.photos/400/560?random=8" alt="">
<img src="https://picsum.photos/400/270?random=9" alt="">
<img src="https://picsum.photos/400/380?random=10" alt="">
<img src="https://picsum.photos/400/300?random=1" alt="">
<img src="https://picsum.photos/400/200?random=2" alt="">
<img src="https://picsum.photos/400/500?random=3" alt="">
<img src="https://picsum.photos/400/400?random=4" alt="">
<img src="https://picsum.photos/400/350?random=5" alt="">
<img src="https://picsum.photos/400/250?random=6" alt="">
<img src="https://picsum.photos/400/450?random=7" alt="">
<img src="https://picsum.photos/400/560?random=8" alt="">
<img src="https://picsum.photos/400/270?random=9" alt="">
<img src="https://picsum.photos/400/380?random=10" alt="">
</div>
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
<script>
window.addEventListener('load',function(){
let magicGrid = new MagicGrid({
container: "#container", // Required. Can be a class, id, or an HTMLElement.
static: true, // Required for static content.
animate: true, // Optional.
});
magicGrid.listen();
})
</script>
</body>
</html>
CDN :-
<script src="https://unpkg.com/magic-grid/dist/magic-grid.cjs.js"></script>
<!-- or (minified) -->
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>APIMagicGrid(config)config (required): Configuration object
The MagicGrid constructor. Initializes the grid with a configuration object.
let magicGrid = new MagicGrid({ container: "#container", // Required. Can be a class, id, or an HTMLElement static: false, // Required for static content. Default: false. items: 30, // Required for dynamic content. Initial number of items in the container. gutter: 30, // Optional. Space between items. Default: 25(px). maxColumns: 5, // Optional. Maximum number of columns. Default: Infinite. useMin: true, // Optional. Prioritize shorter columns when positioning items? Default: false. useTransform: true, // Optional. Position items using CSS transform? Default: True. animate: true, // Optional. Animate item positioning? Default: false. center: true, //Optional. Center the grid items? Default: true. });
API
MagicGrid(config)
config (required): Configuration object
The MagicGrid constructor. Initializes the grid with a configuration object.
let magicGrid = new MagicGrid({
container: "#container", // Required. Can be a class, id, or an HTMLElement
static: false, // Required for static content. Default: false.
items: 30, // Required for dynamic content. Initial number of items in the container.
gutter: 30, // Optional. Space between items. Default: 25(px).
maxColumns: 5, // Optional. Maximum number of columns. Default: Infinite.
useMin: true, // Optional. Prioritize shorter columns when positioning items? Default: false.
useTransform: true, // Optional. Position items using CSS transform? Default: True.
animate: true, // Optional. Animate item positioning? Default: false.
center: true, //Optional. Center the grid items? Default: true.
});
Post a Comment