How to create customizable, dynamic grid layout using CSS and JavaScript?

Question

I am working on a project that involves a lot of CSS. The customer wants to have a grid layout on the home page where he wants to be able to rearrange UI components with drag and drop. These UI components could be of different sizes: 1x1, 2x2 and 3x3. When I drop an UI item at the desired new location it should push the other components aside. Any possible holes should be filled with 1x1 components.

How it should work

Before I have draged a component
Draging the 2x2 component
Dropping the component in the middle, the two 1x1 components make room and adapt around the 2x2

Note that the size of the grid is not limited to 8 1x1, but the height as well as the width of it should be possible to expand and make smaller.

I’ll rather not use tables but other than that I am open to suggestions. Right now I've just used inline-block divs which I can drag and drop to switch the jQuery DOM objects. The effect isn't quite what the customer wants: How it is now

how did you able to achieve ?

Mukund Kumar
– Mukund Kumar

2024-03-07 14:46:43 +00:00
Commented Mar 7, 2024 at 14:46 — Mukund Kumar
– Mukund Kumar, Commented Mar 7, 2024 at 14:46

Ol Sen · Accepted Answer · 2013-04-12 12:00:26Z

1

I've made a lot dynamic layouts with the same idea. You need to think more in how your float behavior from block to block is stopping for the next following blocks, so they become correct repositioned like you want. So to define a float-stop element is necessary. Your blocks will work with float:left maybe float:right. At some point you will figure out that this behavior has to stop somewhere best done with CSS

.floatstop {
     clear: both; //the important code here..
     width: 100%;
     height: 1px;
     line-height: 1px;
     margin-top:-1px;
}

and Html

<div class="floatstop"></div>

Made of all blocks who need border to the next block on the left side (maybe right side too) you have to define a base layout which has space for the very right placed block too with borderspace for it, otherwise it would float down under the block before.

But there is a more modern way! You can use CSS3 codes to define your layout.

.columnblock {
     width: 100%;
     column-gap: 30px;
     // for symmetric columned layouts use..
     column-count: 3; 
     // or for not symmetric layouts use..
     column-width: 280px;
}

<div class="columnblock">
    <p>Lorem Ipsum</p>
    <p>another Paragraph</p>
</div>

There other things to mention here but you can read about http://www.w3schools.com/css3/css3_multiple_columns.asp

edited Apr 12, 2013 at 12:00

answered Apr 12, 2013 at 11:47

Ol Sen

3,3882 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ol Sen Over a year ago

if you create a block and place it by dropping it should place a div.floatstop too, so your javascript will find this div.floatstops and when you place your block before it - it will be placed in neighborhood or if after the floatstop it will fall under the allready placed block

Borgen Over a year ago

I will test this method and come back with the result.

Borgen Over a year ago

I'm not getting it to work. Could you make an example on jsFiddle?

Ol Sen Over a year ago

yes this is a bit confusing, because you still need browser specific codes for this css3 rules, but anyway look here this fiddle tinker.io/4e4f0

Collectives™ on Stack Overflow

How to create customizable, dynamic grid layout using CSS and JavaScript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related