JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<div class="content snap">
    I'm content. 
    I want to snap and resize to fit grids by jquery: 
    When the document is ready.
    When the window is resized.
    The content can be different.
</div>

CSS

body {
    background: #ffffff url(http://i.cubeupload.com/eDVOcq.png) repeat;
    min-height: 200px;
    margin: 0;
}
.content {
    width: 125px;
    border: 1px solid red;
    margin: 85px;
    padding: 12px;
    font-family: Tahoma;
    font-size: 13px;
    line-height: 1.5;
    color: black;
}
.snap { position:relative; }

JavaScript

var Content = {
    snapElement: function(element){
        offset = element.offset();
        element.css('left', (Math.ceil(offset.left/10)*10)+'px');
        element.css('top', (Math.ceil(offset.top/10)*10)+'px');
        element.css('margin', '0');
    },
    snapElements: function(){
        var elements = $("body").find(".snap");
        elements.each(function(){
            Content.snapElement($(this));
        });     
    }
}

$(window).resize(function () {
    Content.snapElements();
});

$(document).ready(function () {
    Content.snapElements();
});