Combine several divs into a block of individual divs

Question

Combine several divs into a block of individual divs

As part of my project, I am working on creating a number board where specific numbers need to merge into a single cell. Please see the picture for reference https://i.sstatic.net/99WJq.png

Below is the HTML code snippet that I have tried. I used margin for non-merge cells and border for merged cells, but unfortunately, the alignment of the cells got distorted. Can anyone suggest a different approach or provide any leads or runnable links that might be helpful?

<!DOCTYPE html>
<html>
<body>
<div class="parent">
    <div class="child">14</div>
    <div class="child">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child merged">18</div>
    <div class="child merged">19</div>
    <div class="child merged">20</div>
    <div class="child">34</div>
    <div class="child">35</div>
    <div class="child">36</div>
    <div class="child">37</div>
    <div class="child">38</div>
    <div class="child">39</div>
    <div class="child">40</div>
</div>
</body>
</html>

Here is what I have attempted so far https://i.sstatic.net/e6OXk.png

.parent {
    display: flex;        
    flex-wrap: wrap;
    align-content: flex-start;
 }
 .child {
    margin: 4px;
    padding: 0;
    height: 35px;
    width: 35px;
    background: #FFFFFF;
    border: 1px solid #C0C0C0;
 }
 .merged{
    margin: 0;
    padding: 4px;
    border-color: #1792E5;
    background-color: #1792E5;
    color: #FFFFFF;
}

javascript html css flexbox

Answer 1

Answer №1

My assistance should prove beneficial

var x = document.getElementsByClassName('child');
var y = 'child merged';
var c, d, e;
for (var i = 1; i < x.length - 1; i++) {

    c = x[i - 1].getAttribute('class');
    d = x[i + 1].getAttribute('class');
    e = x[i].getAttribute('class');

    if (c === y && e === y && d === y) {
        x[i].setAttribute('style', 'margin: 5px 0px 5px 0px;');
    }
    else if (c !== y && e === y && d !== y) {
        x[i].setAttribute('style', 'margin: 5px 5px 5px 5px;');
    }
    else if (c !== y && e === y && d === y) {
        x[i].setAttribute('style', 'margin: 5px 0px 5px 5px;');
    }
    else if (c === y && e === y && d !== y) {
        x[i].setAttribute('style', 'margin: 5px 5px 5px 0px;');
    }
    else if (c === y && x[i - 2] === undefined && e !== y) {
        x[i - 1].setAttribute('style', 'margin: 5px 5px 5px 5px;');
    }
    else if (i === x.length - 2 && d === y) {
        x[i + 1].setAttribute('style', 'margin: 5px 5px 5px 5px;');
    } else { }

    if (x[i + 2] === undefined && e === y && d === y) {
        x[i + 1].setAttribute('style', 'margin: 5px 5px 5px 0px;');
    }

    if (c === y && x[i - 2] === undefined && e === y) {
        x[i - 1].setAttribute('style', 'margin: 5px 0px 5px 5px;');
    }

    if (i === 7 || i === 14 || i === 21) {
        x[i - 1].style.marginRight = '5px';
        x[i].style.marginLeft = '5px';
    }

}

.parent {
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px;
    text-align: center;
}

.child {
    border: 1px solid #ccc;
    margin: 5px 5px 5px 5px;
}

.merged {
    margin: 5px 0px 5px 0px;
    padding: 0px;
    border: 0px;
    background: #1792E5;
}

<div class="parent">
    <div class="child merged">14</div>
    <div class="child merged">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child merged">18</div>
    <div class="child merged">19</div>
    <div class="child merged">20</div>
    <div class="child merged">34</div>
    <div class="child">35</div>
    <div class="child">36</div>
    <div class="child merged">37</div>
    <div class="child merged">38</div>
    <div class="child">39</div>
    <div class="child merged">40</div>
    <div class="child merged">41</div>
    <div class="child merged">42</div>
    <div class="child">43</div>
    <div class="child merged">44</div>
    <div class="child">45</div>
    <div class="child ">46</div>
    <div class="child merged">47</div>
</div>

Answer 2

My assistance should prove beneficial

var x = document.getElementsByClassName('child');
var y = 'child merged';
var c, d, e;
for (var i = 1; i < x.length - 1; i++) {

    c = x[i - 1].getAttribute('class');
    d = x[i + 1].getAttribute('class');
    e = x[i].getAttribute('class');

    if (c === y && e === y && d === y) {
        x[i].setAttribute('style', 'margin: 5px 0px 5px 0px;');
    }
    else if (c !== y && e === y && d !== y) {
        x[i].setAttribute('style', 'margin: 5px 5px 5px 5px;');
    }
    else if (c !== y && e === y && d === y) {
        x[i].setAttribute('style', 'margin: 5px 0px 5px 5px;');
    }
    else if (c === y && e === y && d !== y) {
        x[i].setAttribute('style', 'margin: 5px 5px 5px 0px;');
    }
    else if (c === y && x[i - 2] === undefined && e !== y) {
        x[i - 1].setAttribute('style', 'margin: 5px 5px 5px 5px;');
    }
    else if (i === x.length - 2 && d === y) {
        x[i + 1].setAttribute('style', 'margin: 5px 5px 5px 5px;');
    } else { }

    if (x[i + 2] === undefined && e === y && d === y) {
        x[i + 1].setAttribute('style', 'margin: 5px 5px 5px 0px;');
    }

    if (c === y && x[i - 2] === undefined && e === y) {
        x[i - 1].setAttribute('style', 'margin: 5px 0px 5px 5px;');
    }

    if (i === 7 || i === 14 || i === 21) {
        x[i - 1].style.marginRight = '5px';
        x[i].style.marginLeft = '5px';
    }

}

.parent {
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px;
    text-align: center;
}

.child {
    border: 1px solid #ccc;
    margin: 5px 5px 5px 5px;
}

.merged {
    margin: 5px 0px 5px 0px;
    padding: 0px;
    border: 0px;
    background: #1792E5;
}

<div class="parent">
    <div class="child merged">14</div>
    <div class="child merged">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child merged">18</div>
    <div class="child merged">19</div>
    <div class="child merged">20</div>
    <div class="child merged">34</div>
    <div class="child">35</div>
    <div class="child">36</div>
    <div class="child merged">37</div>
    <div class="child merged">38</div>
    <div class="child">39</div>
    <div class="child merged">40</div>
    <div class="child merged">41</div>
    <div class="child merged">42</div>
    <div class="child">43</div>
    <div class="child merged">44</div>
    <div class="child">45</div>
    <div class="child ">46</div>
    <div class="child merged">47</div>
</div>

Answer 3

Answer №2

The problem was resolved by making adjustments to the CSS file. Feel free to reach out if you need further clarification.

.parent {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px 100px 100px 100px;
}

.child {
    border: 1px solid #ccc;
    margin: 10px 10px 10px 10px;
}

.middle {
  margin: 10px 0px 10px 0px;
  background: blue;
  border:10px;
}

.end {
    margin: 10px 10px 10px 0px;
    border: 10px;
    background: blue;
}

.start {
    margin: 10px 0px 10px 10px;
    border: 10px;
    background: blue;
}

<!DOCTYPE html>
<html>
<body>
<div class="parent">
    <div class="child">14</div>
    <div class="child">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child merged start">18</div>
    <div class="child merged middle">19</div>
    <div class="child merged end">20</div>
    <div class="child">34</div>
    <div class="child">35</div>
    <div class="child">36</div>
    <div class="child">37</div>
    <div class="child">38</div>
    <div class="child">39</div>
    <div class="child">40</div>
</div>
</body>
</html>

Answer 4

The problem was resolved by making adjustments to the CSS file. Feel free to reach out if you need further clarification.

.parent {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px 100px 100px 100px;
}

.child {
    border: 1px solid #ccc;
    margin: 10px 10px 10px 10px;
}

.middle {
  margin: 10px 0px 10px 0px;
  background: blue;
  border:10px;
}

.end {
    margin: 10px 10px 10px 0px;
    border: 10px;
    background: blue;
}

.start {
    margin: 10px 0px 10px 10px;
    border: 10px;
    background: blue;
}

<!DOCTYPE html>
<html>
<body>
<div class="parent">
    <div class="child">14</div>
    <div class="child">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child merged start">18</div>
    <div class="child merged middle">19</div>
    <div class="child merged end">20</div>
    <div class="child">34</div>
    <div class="child">35</div>
    <div class="child">36</div>
    <div class="child">37</div>
    <div class="child">38</div>
    <div class="child">39</div>
    <div class="child">40</div>
</div>
</body>
</html>

Combine several divs into a block of individual divs

Answer №1

Answer №2

Similar questions

The iPad screen displays the image in a rotated position while it remains

Error in jQuery ajax request when passing multiple variables to php script

Can an element be positioned in relation to the border-box of its parent element?

Mastering the art of horizontal alignment for button and ul elements

Tips on obtaining checkbox values other than "true"

Is there a way to clear a @font-face downloaded font from the browser cache?

Ensure that radio buttons are evenly aligned both vertically and horizontally within a flexbox layout

Avoid making numerous http requests by making use of the fetch API

What is the best way to design a regular expression that will only match up to 12 numbers?

Using SVG as an inline background image for a Div element is not functioning correctly

MongoDB's Data-Driven Dropdown

Struggling to maintain data consistency among controllers in Angular by utilizing the rootScope, only to encounter persistent issues with

Transmitting JSON data from Angular to a PHP script

Encountered an unhandled rejection error: TypeError: Unable to destructure the property 'protocol' of 'window.location' because it is undefined

How to place the loading component in the centre of the image using React?

What are the steps for creating a dropdown menu that allows for easy selection of the correct item

Saving a dynamically generated table in a PHP session to display every time the current user logs in

"Approach for appending an additional element to an array item within a child component

What is the best way to extract the JSON value from my API website and assign it to a new variable

Building a custom dialog box using Angular Material with HTML and CSS