Steps to design a grid layout featuring elements (divs/spans) in precise square dimensions, each showcasing unique image backgrounds

Question

Steps to design a grid layout featuring elements (divs/spans) in precise square dimensions, each showcasing unique image backgrounds

I've been working on a website that showcases an ever-evolving gallery of fantasy art. Currently, I've encountered a roadblock in figuring out how to proceed with something that's not functioning as expected. I tried using Masonry and Wookmark without success, so now I'm exploring other options. My goal is to dynamically create either divs or spans within the grid with the class identifier images and set their backgrounds to specific image sources that "cover" the area while being centered. Essentially, I want to create a grid of square windows showcasing these images, which can be clicked to open a lightbox (that I've already created successfully). However, at the moment, although the images are displaying, the containers seem compressed with no padding on the sides.

Truth be told, I'm uncertain about how to handle relative/absolute positioning and inline/block display properties. I suspect this is where my mistake lies, but I lack a clear understanding of what these concepts involve.

Snippet of the HTML:

<div id="grid" class="grid"></div>
<br>

CSS:

.grid {
  z-index:2;
  display: inline-block;
}

.images {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 25%;
  z-index: 2;
  padding-right: 0.25em;
  padding-left: 0.25em;
  padding-top: 0.5em;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
}

Javascript:

var mix = shuffle(Object.keys(backInfo));                 


function unlockImages () {      
  setTimeout(function () {          
    if (mix !== undefined) { 
      var input = mix.shift();
      var entry = backInfo[input];
      var elem = document.createElement("div");
      elem.setAttribute("class", "images");
      elem.setAttribute("id", input);
      elem.setAttribute("title", entry.caption);
      elem.setAttribute("onclick", "javascript:changeImage(" + input + ");");
      document.getElementById("grid").appendChild(elem);
      document.getElementById(input).style.backgroundImage = "url(" + entry.image + ")";
      $("#" + input).fadeTo(0,0);
      $("#" + input).fadeTo(20000,1);
      unlockImages();
    }
  }, 0)
}

To see a live preview of the current progress, visit:

javascript html css positioning

Answer 1

Answer №1

It appears that the issue you are facing pertains to CSS. I have made some adjustments to your CSS code and arrived at the following solution:

.grid {
  z-index:2;
  display: inline-block;
  height: 500px;
  width: 1500px;
}

.images {
  display:inline-block;
  position:relative;
  width:25%;
  height:25%;
  z-index:2;
  margin-right: 0.25em;
  margin-left: 0.25em;
  margin-top: 0.5em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Here are a few things to keep in mind when dealing with your CSS:

When setting a percentage width x height, the parent container must have a designated value. Since the .grid class does not specify a height value, the images appear squished due to taking up 25% of zero height.
Using background-attachment: fixed; prevents the picture from automatically resizing, which I assume is your desired outcome.
If you want spacing between elements, utilize margin instead of padding. Padding affects the interior of an element, while margin creates space between elements as demonstrated in the revised CSS above. Hope this helps!

Answer 2

It appears that the issue you are facing pertains to CSS. I have made some adjustments to your CSS code and arrived at the following solution:

.grid {
  z-index:2;
  display: inline-block;
  height: 500px;
  width: 1500px;
}

.images {
  display:inline-block;
  position:relative;
  width:25%;
  height:25%;
  z-index:2;
  margin-right: 0.25em;
  margin-left: 0.25em;
  margin-top: 0.5em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Here are a few things to keep in mind when dealing with your CSS:

When setting a percentage width x height, the parent container must have a designated value. Since the .grid class does not specify a height value, the images appear squished due to taking up 25% of zero height.
Using background-attachment: fixed; prevents the picture from automatically resizing, which I assume is your desired outcome.
If you want spacing between elements, utilize margin instead of padding. Padding affects the interior of an element, while margin creates space between elements as demonstrated in the revised CSS above. Hope this helps!

Answer 3

Answer №2

If you're looking to generate a dynamic grid and populate images in each box, you can use the following code snippet.

Start by creating a container div with the id "wrapper".

Include this Javascript function in your code and call it as needed:

function GenerateGrid() {

   var rows = 2;
   var columns = 2;

    $("#wrapper").empty();

    for (var i = 0; i < rows; i++) {

        var $row = $("<div />", {
            class: 'row'
        });

        // Add columns to the row object
        for (var c = 0; c < columns; c++) {

            var $square = $("<div />", {
                class: 'square' 
            });

            //Set your image source here
            $square.append("<img></img>");

            $row.append($square.clone());
        }

        $("#wrapper").append($row.clone());
    }
}

Answer 4

If you're looking to generate a dynamic grid and populate images in each box, you can use the following code snippet.

Start by creating a container div with the id "wrapper".

Include this Javascript function in your code and call it as needed:

function GenerateGrid() {

   var rows = 2;
   var columns = 2;

    $("#wrapper").empty();

    for (var i = 0; i < rows; i++) {

        var $row = $("<div />", {
            class: 'row'
        });

        // Add columns to the row object
        for (var c = 0; c < columns; c++) {

            var $square = $("<div />", {
                class: 'square' 
            });

            //Set your image source here
            $square.append("<img></img>");

            $row.append($square.clone());
        }

        $("#wrapper").append($row.clone());
    }
}

Steps to design a grid layout featuring elements (divs/spans) in precise square dimensions, each showcasing unique image backgrounds

Answer №1

Answer №2

Similar questions

The header is visible above the navigation bar when scrolling on mobile, but it should be hidden

"Unleashing the power of plugins in your Nuxt.js store: A step

Using jQuery to create transitions when a class is changed and adding a delay to the transition

Initialization of Arrays with Default Values

Shut down the Pub/Sub client following a transmission via socket.io-mongodb-emitter

Update the styling of each div element within a designated list

Accessing properties in JSON data with AngularJS

In iOS devices, the Ionic framework restricts the ability to open links in a new tab using the ng-href attribute

Ways to reduce lag while executing a for loop

The issue with Console Logs and Alerts not functioning properly

Utilizing AJAX to Access JSON Arrays

Can you identify the specific name of the IE CSS bug affecting double vertical padding?

Is there a way to displace a 2D triangle within a webgl shader?

Organizing the order of DIVs from desktop to smartphone

JavaScript was unable to locate the requested URL on the server

Angular: creating a template with a directive inside another directive

When utilizing Next.js with useEffect, axios, and router.query, the data displayed may not refresh properly when changing

Is client-side rendering the new trend, bypassing traditional server-side rendering?

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

The relatedTarget property of the Event object is always set to undefined