Tips for arranging div elements in a grid-like matrix layout

Question

Tips for arranging div elements in a grid-like matrix layout

I am facing a challenge in arranging multiple rectangular divs into a grid structure with 10 columns and 10 rows. The CSS styles for the top, bottom, left, or right positions must be in percentages to accommodate zoom in and out functionality without overlapping issues. Despite my efforts, the divs are stacking vertically instead of forming a grid layout as intended. Here is the code snippet I have been working on:

setCss = function($divId,$len) {
    alert("xmlLength is :"+$len);
    alert("set CSS::"+$divId);
    if ($len<3)//(i%2==0)
    {
        var size = 10;

        $("div#"+$divId).css("top",size*$len+"%");
        $("div#"+$divId).css("left",size*$len+"%");
        $("div#"+$divId).css("transform","none");
        $("div#"+$divId).css("margin","10px");

    }
    if (i>=3 )
    {
        var size = 10;
        $("div#"+$divId).css("top",size*$len+"%");
        $("div#"+$divId).css("left",size*$len+"%");
        $("div#"+$divId).css("bottom",size*$len+"%");
        $("div#"+$divId).css("right",size*$len+"%");

        $("div#"+$divId).css("transform","none");
        $("div#"+$divId).css("margin","10px");

    }
};

I have experimented with various combinations but have not achieved the desired result yet. Any guidance on how to tackle this issue would be greatly appreciated. Thank you!

javascript jquery html css

Answer 1

Answer №1

If you're looking to organize columns and rows, here are a few options:

One option is to create a table.
You can also set display:inline-block for the divs, and every 10th div add an extra empty div with display:block.
Alternatively, you can use float-left for the divs, and after every 10 divs, add clear:right to break to a new line.

For the second and third options, make sure to set min-width:[10*divWidth] for the container.

Edit:

It appears that absolute positioned divs are being used.

In this case, you can loop through all the divs with an index i. If i%10 == 0, increase the top property and reset the left position.

Or, for a more efficient solution without tracking current top and left values,

var cols=10,
    rows=5,
    wid=10,
    hei=20,
    d=document.createElement('div');
d.className='cell';
d.style.width=wid+'px';
d.style.height=hei+'px';
for(var i=0;i<cols*rows;i++){
    var c=d.cloneNode(false);
    c.style.top=Math.floor(i/cols)*hei+'px';
    c.style.left=i%cols*wid+'px';
    document.body.appendChild(c);
}

Check out the implementation in this jsfiddle: http://jsfiddle.net/4pj74/

Edit 2:

If you prefer to create all elements first and then position them,

// Setting up variables
var cols=10,
    rows=5,
    wid=10,
    hei=20,
    d=document.createElement('div'),
    wrap=document.getElementById('wrapper');
d.className='cell';
d.style.width=wid+'px';
d.style.height=hei+'px';

//Creating elements
for(var i=0;i<cols*rows;i++){
    var c=d.cloneNode(false);
    wrap.appendChild(c);
}

//Positioning elements
for(var i=0;i<wrap.childNodes.length;i++){
    setCSS(i);
}
function setCSS(i){
    var el=wrap.childNodes[i];
    el.style.top=Math.floor(i/cols)*hei+'px';
    el.style.left=i%cols*wid+'px';
}

(I'm using

<div id="wrapper"></div>

as the container instead of directly appending to the body)

View the updated code here: http://jsfiddle.net/4pj74/3/

Answer 2

If you're looking to organize columns and rows, here are a few options:

One option is to create a table.
You can also set display:inline-block for the divs, and every 10th div add an extra empty div with display:block.
Alternatively, you can use float-left for the divs, and after every 10 divs, add clear:right to break to a new line.

For the second and third options, make sure to set min-width:[10*divWidth] for the container.

Edit:

It appears that absolute positioned divs are being used.

In this case, you can loop through all the divs with an index i. If i%10 == 0, increase the top property and reset the left position.

Or, for a more efficient solution without tracking current top and left values,

var cols=10,
    rows=5,
    wid=10,
    hei=20,
    d=document.createElement('div');
d.className='cell';
d.style.width=wid+'px';
d.style.height=hei+'px';
for(var i=0;i<cols*rows;i++){
    var c=d.cloneNode(false);
    c.style.top=Math.floor(i/cols)*hei+'px';
    c.style.left=i%cols*wid+'px';
    document.body.appendChild(c);
}

Check out the implementation in this jsfiddle: http://jsfiddle.net/4pj74/

Edit 2:

If you prefer to create all elements first and then position them,

// Setting up variables
var cols=10,
    rows=5,
    wid=10,
    hei=20,
    d=document.createElement('div'),
    wrap=document.getElementById('wrapper');
d.className='cell';
d.style.width=wid+'px';
d.style.height=hei+'px';

//Creating elements
for(var i=0;i<cols*rows;i++){
    var c=d.cloneNode(false);
    wrap.appendChild(c);
}

//Positioning elements
for(var i=0;i<wrap.childNodes.length;i++){
    setCSS(i);
}
function setCSS(i){
    var el=wrap.childNodes[i];
    el.style.top=Math.floor(i/cols)*hei+'px';
    el.style.left=i%cols*wid+'px';
}

(I'm using

<div id="wrapper"></div>

as the container instead of directly appending to the body)

View the updated code here: http://jsfiddle.net/4pj74/3/

Tips for arranging div elements in a grid-like matrix layout

Answer №1

Similar questions

Choosing jQuery over JQuery Mobile for a standard web application to effectively manage different devices

How can I combine various array values of equal length using a delimiter to create one final array?

The cascading style sheet does not have any effect on the layout of the tables within the

Securing form submissions in Express JS: Best practices for protecting your data

Utilizing the Vue feature of dynamic route naming within a component's function

Performing two separate AJAX calls within a single script, but utilizing a specific variable from the URL in one of the calls

Share the hyperlink to a webpage with someone else

Automatically updating markers on Google Maps v3

How about implementing built-in validation for Vue Headless UI Listbox (Select) element?

selenium tutorial: Testing tooltip functionality with Python

Updating the properties of items in an array using React

Increase the value by one of the number enclosed in the <h3> element

Numerous SVGs sharing identical IDs

What is the best method for incorporating jQuery code into a separate file within a WordPress theme?

Which internet browsing engine does Android leverage for phonegap applications?

Challenge with constructing HTML structures

Can anyone recommend a user-friendly JavaScript dialog box compatible with jQuery that is mobile-responsive?

The first item in Swiper is incorrectly displayed after the initial cycle, even though the data is accurate

Is the order in which properties are executed always the same in CSS rules?

Detecting when an object exits the proximity of another object in ThreeJS