CODEWITHSUNDEEP
htmlcsslayoutgrid
Nick Bewley
Nick Bewley

Reputation: 9289

Dynamic Grid CSS

How do I achieve a dynamic grid that looks like this ? :

enter image description here

I cannot figure out how to properly construct the css to achieve this. Currently, this is what my grid looks like:

enter image description here

Here's a fiddle where I have been trying to solve this:

http://jsfiddle.net/qqeo9ety/2/

Here's my current css:

blue {
    width: 40px;
    height: 40px;
    margin: 5px;
    background-color: blue;
    float:left;
    display:inline;
}

.red {
    width: 90px;
    height: 90px;
    margin: 5px;
    float:left;
    background-color: red;
}

Thanks a ton for any ideas!!

Upvotes: 1

Views: 2181

Answers (3)

Michael Dziedzic
Michael Dziedzic

Reputation: 543

Here's a way to do it while preserving the semantic order:

JSFiddle

<div id="container">
<div class="blue">1</div>
<div class="blue">2</div>
<div class="red"></div>
<div class="blue b3">3</div>
<div class="blue b4">4</div>
<div class="blue b5">5</div>
<div class="blue b6">6</div>
<div class="blue b7">7</div>
<div class="blue">8</div>
<div class="blue">9</div>
<div class="blue">10</div>
<div class="blue">11</div>
</div>

.blue {
    width: 40px;
    height: 40px;
    margin: 5px;
    background-color: blue;
    float:left;
    display:inline;
}

.b3, .b6 {
    float: right;
}

.b4, .b7 {
    clear: both;
}

.red {
    width: 90px;
    height: 90px;
    margin: 5px;
    left: 110px;
    float:left;
    position: absolute;
    background-color: red;
}

#container {
    width: 250px;   
}

Upvotes: 0

Suhaib Janjua
Suhaib Janjua

Reputation: 3574

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. Try using GridsterJS. Live Demos.

HTML

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

Script

$(function(){ //DOM Ready

    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });

});

And that's it. It starts working. All you have to do is to set properties according to your needs to enable/disable its features in this function.

You can enable/disable drag and drop functionality by using,

// Disables drag and drop
$(".gridster ul").gridster().data('gridster').disable()

// Enables drag and drop
$(".gridster ul").gridster().data('gridster').enable()

Upvotes: 0

Michael Dziedzic
Michael Dziedzic

Reputation: 543

How about something like this?

<div id="container">

<div id="c1">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>

<div id="c2">    
<div class="red"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>

<div id="c3">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>

</div>

With the following additional CSS:

#c1, #c2 {
    width: 100px;
    float: left;
}

The main idea being setting it up in three columns first.

Upvotes: 1

Related Questions