Adjustable dimensions for a collection of squares based on screen size

Question

Adjustable dimensions for a collection of squares based on screen size

I am currently designing a grid composed of 1:1 squares and allowing the user to continually add more squares. My main goal is to ensure that the size of each square maintains its aspect ratio while being able to resize accordingly. The challenge lies in keeping the squares visible on the page without any need for scrolling, making the webpage responsive in terms of both width and height.

While testing, I have managed to create an example where a new square is added every second. However, I am facing difficulties in maintaining the height aspect of the squares, even though I have successfully implemented it for the width.

setInterval(() => {
                // console.log(document.getElementsByClassName('square-container')[0]);
                document.getElementsByClassName('square-container')[0].innerHTML += ("<div class='square'></div>");
            }, 1000);

.square-container {
                display: flex;
                flex-wrap: wrap;
            }

            .square {
                position: relative;
                flex-basis: calc(33.333% - 10px);
                margin: 5px;
                box-sizing: border-box;
                background: red;
                transition: background 1s;
            }

            .square::before {
                content: "";
                display: block;
                padding-top: 100%;
            }

<div class="square-container">
                <div class="square"></div>
            </div>

I am utilizing only basic HTML, CSS, and JavaScript without relying on UI libraries like Bootstrap.

javascript html css

Answer 1

Answer №1

To optimize layout, consider using Float instead of wrap and setting the square-container to display block.

<div>
<div id="square-container">
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
</div>
</div>

#square-container{
  display: block
}
#square{
    float: left;
    height: 100px;
    width: 100px;
    background-color: orangered;
    margin: 1px;
}

Answer 2

To optimize layout, consider using Float instead of wrap and setting the square-container to display block.

<div>
<div id="square-container">
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
</div>
</div>

#square-container{
  display: block
}
#square{
    float: left;
    height: 100px;
    width: 100px;
    background-color: orangered;
    margin: 1px;
}

Answer 3

Answer №2

How about considering a pure javascript solution?

Simply establish an initial value and let JavaScript handle all the calculations whenever a square is added.

// Function for resizing the squares
function resizeSquares(){
    // Access the squares
    squares = document.getElementsByClassName('square');
    for (i=0;i<squares.length;i++) {
        // Set the width of each square based on the window's width
        squares[i].style.width = document.body.clientWidth / squarePerRow + 'px';
        // Maintain the aspect ratio by setting the height equal to the width
        squares[i].style.height = squares[i].style.width;
    }
}

// Establish the initial capacity of squares per row
squarePerRow = 3;

// Initialize the size of the squares
resizeSquares();

setInterval(function(){
    // Add a new square
    document.getElementById('container').innerHTML += '<div class="square"></div>';
    // Check if the squares exceed the window height
    if(document.body.clientHeight > document.documentElement.clientHeight) {
        // If they do, increase the capacity of squares per row by one
        squarePerRow = squarePerRow + 1;
    }
    // Resize the squares
    resizeSquares()
}, 1000)

#container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    background: red;
    border: 5px solid white;
    box-sizing: border-box;
    transition: all, 0.5s;
}

<div id="container">
    <div class="square"></div>
</div>

Answer 4

How about considering a pure javascript solution?

Simply establish an initial value and let JavaScript handle all the calculations whenever a square is added.

// Function for resizing the squares
function resizeSquares(){
    // Access the squares
    squares = document.getElementsByClassName('square');
    for (i=0;i<squares.length;i++) {
        // Set the width of each square based on the window's width
        squares[i].style.width = document.body.clientWidth / squarePerRow + 'px';
        // Maintain the aspect ratio by setting the height equal to the width
        squares[i].style.height = squares[i].style.width;
    }
}

// Establish the initial capacity of squares per row
squarePerRow = 3;

// Initialize the size of the squares
resizeSquares();

setInterval(function(){
    // Add a new square
    document.getElementById('container').innerHTML += '<div class="square"></div>';
    // Check if the squares exceed the window height
    if(document.body.clientHeight > document.documentElement.clientHeight) {
        // If they do, increase the capacity of squares per row by one
        squarePerRow = squarePerRow + 1;
    }
    // Resize the squares
    resizeSquares()
}, 1000)

#container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    background: red;
    border: 5px solid white;
    box-sizing: border-box;
    transition: all, 0.5s;
}

<div id="container">
    <div class="square"></div>
</div>

Adjustable dimensions for a collection of squares based on screen size

Answer №1

Answer №2

Similar questions

Attempting to create a discord bot using Selenium in Python for seamless integration

Loading Animation with jQuery and Minimum Time Delay

What is the reason for not using constants for events in the Node.js programming language?

how can JavaScript be used to retrieve an object based on a condition from an array of objects and an ArrayList

Tips for referencing the second class when two classes share the same name in Selenium WebDriver

The eel feature results in no output

Display only alphabetic characters in the text field

What is the best way to identify when the soft-keyboard is hidden in the Android browser

Tips for transferring POST body data to a different route without losing any information

The error message "TypeError: Trying to access properties of an undefined object (reading '800')" is being displayed

AJAX cannot be used with the current session

Ensuring form labels are properly aligned with input-group-prepend in Bootstrap

Guide on creating a JSONP request

Arrange data into columns on a website

How far apart are two surfaces when they are rotated along the Y-axis

index.js file in npm package optimized for browser compatibility using Babel transpiler

What is the correct regex expression for validating decimal numbers between 1.0 and 4.5?

the reason behind the peculiar behavior of angularjs ng-include

Sending multiple objects using Ajax and fetching them in PHP

Executing a JavaScript function when an HTML page is loaded within an OBJECT Tag