A static example without any javascript. Just a responsive grid.
Reorder using native drag-n-drop and a little bit of javascript.
Can move items around between multiple containers. No additional code.
Modify options on the fly or set them as data attributes.
Modify width and hight while keeping items from overlapping
You can have different column counts, aspect ratios and gaps from the defaults.
There are 2 primary components - the css, which is responsible for positioning and the javascript plugin, used to change that positioning. You can use only the css without any javascript and still get a nice responsive grid.
Layout grid uses bootstrap's breakpoints by default (configurable). They are as follows:
Extra small devices Phones (<768px) |
xs |
---|---|
Small devices Tablets (≥768px) |
sm |
Medium devices Desktops (≥992px) |
md |
Large devices Desktops (≥1200px) |
lg |
We start with the basic html structure:
<div class="lt-container lt-xs-h-6">
<div class="lt lt-xs-x-0 lt-xs-y-0 lt-xs-w-1 lt-xs-h-1">
<div class="lt-body">
Your content
</div>
</div>
</div>
lt-xs-h-6
on the lt-container means the height on screen size "xs" the height will be 6 counts. lt-xs-x-0
on the item means the x position on screen size "xs"
lt-{size}-x-{number} | Horizontal Position on xs screen size, starts from and defaults to 0 |
---|---|
lt-{size}-y-{number} | Vertical Position on xs screen size, starts from and defaults to 0 |
lt-{size}-w-{number} | Width on xs screen size, starts from and defaults to 1 |
lt-{size}-h-{number} | Height on xs screen size, starts from and defaults to 1 |
Here's how it looks when every class for every screen size is set:
<div class="lt-container lt-xs-h-6">
<div class="lt
lt-xs-x-0
lt-xs-y-0
lt-xs-w-1
lt-xs-h-1
lt-sm-x-0
lt-sm-y-0
lt-sm-w-1
lt-sm-h-1
lt-md-x-0
lt-md-y-0
lt-md-w-1
lt-md-h-1
lt-lg-x-0
lt-lg-y-0
lt-lg-w-1
lt-lg-h-1">
<div class="lt-body">
Your content
</div>
</div>
</div>
As with other bootstrap classes the smaller sizes act as the default for larger ones, so you need to set only the things that change of the larger sizes.
Javascript is initialized via data-arrange="layout-grid"
and setting up html5's draggable="true"
on the individual items. The javascript is initialized only on the event of a drag on these items.
<div
class="lt-container lt-xs-h-6"
data-arrange="layout-grid">
<div
class="lt lt-xs-x-0 lt-xs-y-0 lt-xs-w-1 lt-xs-h-1"
draggable="true">
<div class="lt-body">
Your content
</div>
</div>
</div>
Layout Grid comes with these options and their defaults. All of them can be changed both through javascript or using html5 data attributes. They can also be changed on the fly.
LTGrid.DEFAULTS = {
resize: true,
overlap: false,
compact: true,
params: {
lg: {
gap: 1,
maxWidth: Number.MAX_VALUE,
cols: 4,
aspect: 2/3
},
md: {
gap: 2,
maxWidth: 1200,
cols: 3,
aspect: 2/3
},
sm: {
gap: 3,
maxWidth: 992,
cols: 2,
aspect: 2/3
},
xs: {
gap: 4,
maxWidth: 768,
cols: 1,
aspect: 2/3
}
}
};
resize
is an option that when true will force the container of the grid to shrink to the shortest possible height, enclosing all the items.
overlap
when set to false will forbid "overlapping" so items that find themselves holding the same space will be pushed downwards.
compact
when set to true will try to reduce the vertical spaces between items as much as possible
params
holds the default values from the sass variables. You'll need to set them to the new values here if you've changed them in the sass file, since we can't infer them from the css automatically.
You can set options with data attributes:
<div
id="grid"
class="lt-container lt-xs-h-6"
data-arrange="layout-grid"
data-resize="false"
data-params='{"xs":{"cols":2}}'>
...
</div>
Or with javascript directly
// Javascript
$('#grid').lt_grid({resize: false, params: {xs: {cols: 2}}});
// On the fly modification
$('#grid').lt_grid('option', 'resize', false);
$('#grid').lt_grid('option', 'params', {xs: {cols: 2}});
Layout grid has a lot of methods that it uses internally but can be called as part of the API - some of the methods are documented here, all the others have docs in the source.
Layout grid uses a "Rect" object internally to do calculations, this is simply an object that holds width, height, x and y, and has some utility methods along the way.
You can create your own "Rect" objects like this var rect = new $.lt.Rect(x, y, width, height)
.
rect.x
rect.y
rect.w
rect.h
attributes for x, y, width and hight respectively
rect.bottom()
to get the height + y
rect.right()
to get the width + x
rect.intersect(rect2)
returns true if the two rects intersect
rect.setCss(classes, size)
Modify a "css classes" string with the pos and size of this rect, for a specific screen size
rect.loadCss(classes, size)
Load data from "css classes", for a specific screen size
$(..).lt_rect()
is a jquery function that is a setter / getter for the "rect" object of a given widget.
You need to pass "size" as the first argument so it knows for which size the rect is being viewed / modified.
var rect = $('#widget1.lt').lt_rect('lg')
rect.x = 2;
rect.w = 2;
$('#widget1.lt').lt_rect('lg', rect);
$(..).lt_size()
is a jquery function to get the current "size" of the grid, can be "lg", "md", "sm" or "xs"
$(..).lt_ensure_id()
Used internally to set a unique ID on an item that doesn't have one.
var size = $('#container').lt_size();
console.log(size);
$(..).lt_grid('option', option, value)
allows you to set an option on the fly
$('#container').lt_grid('option', 'compact', false);
$(..).lt_grid('compact')
Compacts the grid, reducing horizontal space. It ignores the compact option setting.
$('#container').lt_grid('compact');
$(..).lt_grid('resize')
Resize the grid, setting the minimum possible size for the container. It ignores the resize option setting.
$('#container').lt_grid('resize');
$(..).lt_grid('update')
Call resize and compact, based on the options.
$('#container').lt_grid('update');
$(..).lt_grid('reposition', $widget, {x: 1, y: 1, w: 1, h: 1})
Modify the position or size of a widget inside the grid (and call "update" method). Any parameter can be omitted so you can either set only position or only size.
$('#container').lt_grid('reposition', $('#widget1'), {x: 1, y: 1, w: 1, h: 1});
Layout grid only requires jquery. It uses native html5 drag-n-drop so all the browsers that support that (all the major browsers) should work.
Mobile browsers are also supported and it uses native touch events there.
Thanks a lot to the creator of gridster.js, where I got the inspiration for this plugin.
Built by Ivan Kerin as part of Clippings.com