Adjust grid width dynamically according to the container

I am working with a grid made up of 32x32 slots. Link to Grid Image

How can I dynamically add or remove grid slots to fill the element without cutting off halfway through a slot/tile?

Below is the code snippet:

<style>
    .drag-item {
        position: absolute;
        background-image: url('assets/images/objects/desk-1.png');
        background-size: 32px;
        width: 32px; height: 32px;
        cursor: move;
    }
    .drop-target {
        position: absolute;
        width: 480px; height: 480px;
        border:dashed 1px orange;
        background: whitesmoke url('assets/images/objects/grid_64.png') repeat;
        background-size: 32px 32px;

    }
</style>
<div class="panel-body" style="width: 520px; height: 520px;">
        <div class="drop-target">
                <div class="drag-item"></div>
                <div class="drag-item"></div>
                <div class="drag-item"></div>
                <div class="drag-item"></div>
                <div class="drag-item"></div>
        </div>
</div>

Answer №1

Utilize

.drag-item {
    float: left;
}

as opposed to

.drag-item {
    position: absolute;
}

By doing this, the items will line up next to each other and wrap to the next line when space is limited.

To ensure that the container remains a square size, you can either use javascript or numerous media queries. You can then utilize overflow: hidden on the container to hide any extra lines of items or employ javascript to completely remove them from the DOM.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Poor text display quality on Internet Explorer

Are there any solutions to improve font display on Internet Explorer for Windows? font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; Check out this 100% crop comparison: Left: IE Right: FF ...

Converting Malayalam Text to HTML Entities and Back in C#

Currently, I am facing a challenge in encoding/decoding characters from Arabic, Malayalam, and Bengali languages. I have successfully achieved it for Arabic characters using the System.Net.WebUtility.HtmlDecode(row["Context"].ToString()); method, but I a ...

Is it possible for CSS to automatically style paragraphs based on the preceding heading class?

Looking to create some unique CSS rules for formatting interview transcripts. The format I have in mind is as follows: <h2 class="interviewer">Alice: [00:00:00]</h2> <p>Is it ok if I ask you a question now?</p> <h2 class="inter ...

Error: Unable to change image -- TypeError: Cannot assign value to null property 'src'

As I work my way through the textbook for one of my classes, I am practicing by building an image swapping page. The concept is simple - clicking on a thumbnail swaps out the main image and enlarges it as if it were linking to another web page. Despite fol ...

Defining the active element in the menu using JavaScript

I need help with my navigation menu: <ul> <li id="active"><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/services/">Our Services</a>< ...

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

Adjust the dimensions of the embedded Google document

Currently, I am in the process of developing a website for my initial client and I'm encountering some difficulty in adjusting the size and background color of an embedded google doc. If anyone could provide assistance, it would be greatly appreciated ...

Menu not functioning properly on iPhone?

I recently completed a web page that features a fixed menu at the top of the page. Strangely, while the menu works perfectly fine on the Android mobile version, it doesn't seem to function properly on an iPhone. Can anyone shed some light on why this ...

Is it permissible to have <ul> tags within an H1 element?

I am curious about whether adding a list inside an H1 heading could cause any issues: <h1> <ul> <li><a href="...">some link</a></li> <li><a href="...">another link</a></li> <li>curre ...

The offcanvas menu in the NextJS Tailwind website does not handle hover or tap events properly when outside of the parent dimensions

My header includes an off-canvas menu that slides in from the right side. Everything seems to be working fine, except for one issue: when the menu is open and visible, the mouse and touch events pass through it to the content underneath. Check out the cod ...

Tips for Adding Style to a Recursive Directory Structure Using CSS

My goal is to create a recursive directory display in HTML using JSON data obtained from a Node.js server and utilizing it as the rendering context for a dustjs-linkedin template. The structure of the data looks like this: { "isDirectory": true, "path ...

What could be the reason behind the malfunctioning of my media query in the

I am trying to connect an external stylesheet to my React component in order to apply different styles based on screen width. Specifically, when the screen width is less than 300px, I want the logo to have a height of 100vh. However, it seems that the medi ...

Menu changes when hovering

I want to create an effect where hovering over the .hoverarea class will toggle the visibility of .sociallink1, .sociallink2, and so on, with a drover effect. However, my code isn't working as expected. Additionally, an extra margin is automatically ...

Modification of window size using jQuery animations

Currently, I am working on creating a sidebar that slides in from the left side of the screen. To achieve this effect, I have set the menu element to float left with a width of 40% and a margin-left of -40%. However, when I try to reveal the sidebar by sw ...

determining the overall page displacement

I'm working with this code and I need help using the IF condition to check if the total page offset is greater-than 75%. How can I implement that here? function getLocalCoords(elem, ev) { var ox = 0, oy = 0; var first; var pageX, pageY; ...

Retrieving the ID of a clicked div in jQuery

I am working with an HTML structure that looks like this: <div class='mydiv' id='89'>hello</div> <div class='mydiv' id='123'>hihihi</div> Currently, my jQuery script is as follows: $(&apo ...

.htaccess file encounters an error when attempting to incorporate an argument related to HTTP 451

My website includes a .htaccess file with the following contents: <Files .htaccess> order allow,deny deny from all </Files> ErrorDocument 404 /websites/404/index.php Adding additional ErrorDocument lines should work, like so: <Files .hta ...

I can't figure out why my navbar-brand won't budge from the left side of the screen. I've attempted using ml-5, but it's still not

https://i.sstatic.net/wo35v.jpg I have experimented with different margin classes like ml-5 in Bootstrap 5 to create spacing. <body> <nav class="navbar navbar-expand navbar-dark bg-dark"> <a class="navbar- ...

Issue with making Bootstrap 4 images responsive using the img-fluid class

My latest project involved creating a login page using a bootstrap grid. I designated the image to span col-lg-8 and the form col-lg-4. However, I encountered an issue when resizing the screen for smaller devices. Despite applying img-fluid to the image, i ...

Is there a way to change an element's display to 'block'? (see more information below)

I'm having an issue with my event listener for a button that is supposed to change the css of #popUpForm. It seems to only work when I add inline css directly to #popUpForm. Is there a way to achieve this without using inline css and instead setting t ...