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

The Formik form is not being populated with data from the API

What is preventing Angular from loading on this Plnkr?

Combine two sets of JavaScript objects based on their positions using Underscore.js

Can JavaScript be used to mimic selecting a location from the autocomplete dropdown in Google Maps API 3?

Having issues with the Vue.js documentation example not functioning properly in Codepen?

A guide on implementing a .click function with jQuery

Tips for appending the id of an active element to a URL

Error TS2307: Module 'calculator' could not be located

Is HTML-escaping necessary when implementing regex checks?

Deactivate hover effects and media queries for Material UI controls in all states

What is the best way to show a loading spinner as my Next image component loads, especially when there is an existing image already being displayed?

I can't seem to figure out why my characters keep disappearing from the HTML string when I attempt to dynamically add HTML using JavaScript

The situation arose where Next.js could not access the cookie due to

Despite being logged, the current value of firebase.auth().currentUser in Firebase is null

selectize.js typescript: Unable to access values of an undefined object (reading '0')

In my opinion, CSS3 transform translateZ can be likened to scaling in some way

Contrast: Colon vs. Not Equal Sign (Typescript)

JQuery validation for phone number format 01x-xxxxxxxx

Having trouble with jQuery functionality when using Laravel 7 mix

Is there a way to dynamically adjust the form action based on whether or not JavaScript is enabled?