Determine the percentage-based width of a grid layout cell

My attempt to create a responsive grid layout is lacking in the mathematical department... Seriously, I'm not a math genius.

This is my goal:

  1. Determine the width of the container holding the grid elements.
  2. Apply a 20px right and bottom margin to all grid elements.
  3. Adjust the number of cells based on the container's width; for example, have 5 cells if the width exceeds 1200px.
  4. The last element in each row should have a margin-right set to 0.
  5. Calculate the percentage width of each cell.

If the last element keeps the margin-right, everything functions as intended. However, the margin needs to be removed in this scenario.

This represents the extent of my mathematical prowess...^-^

var marginRight = 20, viewportWidth = 1200, numcells = 5;
var substract =  marginRight / ( viewportWidth / 100 );
width = 100 / numcells - substract;

As mentioned before, this solution works if the last cells maintain the margin. Unfortunately, they do not, and I'm unsure how to address this issue. Perhaps some wisdom from the Stack Overflow community can shed light on the matter? That would be greatly appreciated. Thank you.

javascripthtmlcssgridview

Answer №1

It seems to be functioning well. Is there a more efficient approach that could be considered?

initialWidth = 1200, cellCount = 5, spaceBetween = 20;
firstValue   = initialWidth - (cellCount - 1) * spaceBetween;
secondValue  = (firstValue / gridNum);
thirdValue   = secondValue / (initialWidth / 100);

Answer №2

@media only screen and (max-device-width:320px) { 
    ._modified_ { margin-right: 0%;width:100%; }
}
@media only screen and (max-device-width:481px) { 
    ._modified_ { margin-right: 0%; width:100%; }
}
@media only screen and (max-device-width:961px) { 
    ._modified_ { margin-right: 2.7894%; width: 48.6053%; }
    ._modified_:nth-child(2n){ margin-right:0; }
}
@media only screen and (max-device-width:1025px) { 
    ._modified_ { margin-right: 1.99005%; width: 32.0066%; }
    ._modified_:nth-child(3n){ margin-right:0; }
}
@media only screen and (min-device-width:799px) { 
    ._modified_ { margin-right: 1.76523%; width: 23.6761%; }
    ._modified_:nth-child(4n){ margin-right:0; }
}
.fluid-4 ._modified_:nth-child(4n){margin-right:0;}
.fluid-3 ._modified_:nth-child(3n){margin-right:0;}
.fluid-2 ._modified_:nth-child(2n){ margin-right:0; }
.fluid-4 ._modified_{margin-right: 1.76523%; width: 23.6761%;}
.fluid-3 ._modified_{margin-right: 1.99005%; width: 32.0066%;}
.fluid-2 ._modified_{margin-right: 2.7894%; width: 48.6053%;}
.fluid-1 ._modified_{margin-right: 0%; width:100%;}

And a bit of JavaScript to update the classes.

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

What is causing this JSON to malfunction in Internet Explorer?

Everything is functioning well on Chrome and other browsers except for IE. Below is an example to illustrate: (specifically referring to IE 8, unsure about compatibility with IE 9) Upon running the JSON request, I encountered an error stating "Object exp ...

javascriptjsoninternet-explorer

Tips for automatically closing SweetAlert after an AJAX request finishes

I recently implemented Sweet-alert into my Angular project. function RetrieveDataFromAPI(url) { SweetAlert.swal( { title: "", text: "Please wait.", imageUrl: "../../app/app-img/loading_spinner.gif", showConfirmB ...

javascriptjqueryangularjsajaxsweetalert

Customizing tab menu functionality for specific click actions

I have created a simple HTML tab menu with JavaScript that allows for changing content when tabs are clicked. test.html <!DOCTYPE html> <html> <head> <title>My Menu Test</title> <style type="text/css" media="all"& ...

javascriptjqueryhtmlcss

Tips for developing a web-based whiteboard application

I am tasked with developing a web application that allows users to design factory layouts by dragging and dropping pre-built components like robots, manufacturing cells, and conveyors onto a canvas. The goal is to create something similar to websites such ...

javascriptreactjstypescripthtml5-canvasfabricjs

"Customizing the gaps between cluster bars on AmCharts JS for a clean and professional

Previously, I utilized the AmCharts flash version where creating clustered column/bar charts like the image below was a breeze. In that setup, the clustered bars were tightly packed with no spacing in between. However, transitioning to the JS version of Am ...

javascriptcssamcharts

Viewing at full width on mobile exceeds 100% [React]

I'm attempting to make a div cover exactly 100% of the width on mobile devices, but no more. The code I'm using is as follows: Here is my React code: <div className="max-width-100vw"> HELLO I AM A UNIQUE SENTENCE HERE??? </div> And ...

htmlcssreactjsmobile

Can a script be executed on a node.js module?

I have been developing a node package with an installation script that establishes a basic application structure. This script simply creates a few folders and generates an "admin" user if one does not already exist. Currently, the script performs multiple ...

javascriptnode.jsnpm

What is the best way to utilize findOneAndUpdate() in Mongoose while maintaining a consistent value?

I have a programming challenge where I need to increment one value if condition x is true, and another value if condition y is true. The issue I'm facing is that my current system also resets the value that is not being updated back to 0, which is not ...

javascriptdatabasemongodbmongoose

Issue encountered while configuring server using express.js

Here is the server.js file I am working on, but I encounter a specific error when trying to set up the server with Express.js var express = require('express'); var app = express(); var PORT = process.env.PORT || 3000; app.all('/*', ...

javascriptnode.jsexpress

Exploring each list item within the specified unordered list

Here is a basic code snippet: var ulreq = $("#abc").children("ul.ghi"); var lists = ulreq.find("li"); for( var i = 0; i < lists.length; ++i){ alert(lists[i].text()); // Display the values in these li }<script src="https://ajax.googleapis.com/ajax ...

javascriptjquery

What are the benefits of storing dist in both a GitHub repository and on npm?

I'm curious about why some repositories include a dist folder. Shouldn't repositories just store source code and not any builds or compiled files? Let's take a look at an example with ES6 code. package.json { "files": [ "dist", ...

javascriptgithubnpmecmascript-6package.json

Running MySQL on Express.js in Linux Mint can be accomplished by following these steps

I previously ran MySQL using XAMPP, do I still need to run the MySQL service? Check out this tutorial -> I am encountering confusion in step #2 Server is running at port 8000 /home/aziz/Desktop/Myprojects/backend/crud_fikri/crud-nodejs-mysql/index.j ...

javascriptmysqlnode.jsexpressservice

Exploring the concept of variable scope with modules in Node.js

I have been searching for information on creating modules and came across some great tips, but not much is available regarding variable scope within module usage. Initially, my program was all in one document var mongodb = require('mongodb'); ...

javascriptnode.js

Issue with incorrect date being retrieved in MongoDB response from a node server

My date in mongodb is structured as follows: ISODate("2020-08-03T00:00:00.000+05:30"), However, after querying the date, it appears like this: 2020-08-02T18:30:00.000Z I am looking to get the correct date of 2020-08-03. What could I be doing wr ...

javascriptnode.jsdatemongoosemongoose-schema

Using jQuery to assign a specific value to all select boxes

I am facing a challenge where I need to change the values of all select boxes on my page to a specific number. Here is the HTML structure: <select> <option value="-1" <option value="55">ENABLE</option> <option value= ...

javascriptjquerydrop-down-menu

What is the best method to update the content of a bootstrap-5 popover using only pure JavaScript?

Having trouble changing the content of a Bootstrap popover using vanilla JavaScript? The code seems to be updating, but the changes are not reflecting on the site. Any suggestions or alternative methods would be greatly appreciated! Maybe there's a di ...

javascripthtmlbootstrap-5popover

How can you simultaneously start multiple tweens in Three.js using Tween chain?

Here's the current code snippet : function move(){ var A = new TWEEN.Tween(meshA.position).to({ z: -10 }, 2000).start(); var B = new TWEEN.Tween(meshB.rotation).to({ z: Math.PI }, 2000); var C = new TWEEN.Tween(meshC.position).to({ x: ...

javascriptthree.jschaintween.js

Maximizing the recursive capability of DjangoTemplates

I have a template called home.html which serves as the view for an app in Django. Within this HTML file, I have implemented some templating to facilitate the dynamic generation of content. For instance, I utilize {% load static %} followed by href="{% stat ...

htmldjangotemplating

javascript detect when two div elements are overlapping

On my webpage, I have implemented the effect.shrink() function. However, when clicking quickly on the page, the div tags start overlapping with other elements. What is the best way to solve this issue? I am using both scriptaculous.js and prototype.js fo ...

javascriptprototypejsscriptaculous

Data input not populating in email

After filling out the form, Gmail pops up with no data entered. How can I ensure that the information I input in the form is transferred to the email? <form class="" action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_em ...

htmlcssbootstrap-5