{"id":12835,"date":"2022-10-02T02:28:04","date_gmt":"2022-10-01T20:58:04","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/"},"modified":"2022-10-02T02:28:04","modified_gmt":"2022-10-01T20:58:04","slug":"solved-css-huge-grid-problems","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/","title":{"rendered":"[Solved] CSS huge grid problems"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

as Mike ‘Pomax’ Kamermans
\n suggested, the best way would be detect mouse click and add item dynamically. You can customize the width and height of items by assigning values to item_width<\/code> and item_height<\/code>.<\/p>\n<\/p>\n

\n
\n
var item_width=40;\r\nvar item_height=40;\r\nvar added_items=[];\r\n$(function(){\r\n      $('.grid').on('click', function(e){\r\n      var x = e.pageX - $(this).offset().left;\r\n      var y = e.pageY - $(this).offset().top; \r\n      var item=$('<div class=\"item\"><\/div>');\r\n      var left=Math.floor(x\/item_width)*item_width;\r\n      var top=Math.floor(y\/item_height)*item_height;\r\n      var position={ 'left':left, 'top':top };\r\n      var index=added_items.findIndex(p => p.left == position.left && p.top == position.top);\r\n      if(index<0){\r\n      added_items.push(position);\r\n      item.css('left', left);\r\n      item.css('top', top);\r\n      item.css('background', \"#\"+((1<<24)*Math.random()|0).toString(16))\r\n      item.appendTo($('.grid'));\r\n      }\r\n    });\r\n  \r\n});<\/code><\/pre>\n
.grid {\r\n  \r\n  width:400px;\r\n  height:400px;\r\n  border:1px solid red;\r\n    position:relative;\r\n  margin:10px;\r\n}\r\n.item {\r\n  width:40px;\r\n  height:40px;\r\n  position:absolute;\r\n  background:red;  \r\n}\r\n.item:hover { \r\n}<\/code><\/pre>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n<div class=\"grid\"> <\/div><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved CSS huge grid problems <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] as Mike ‘Pomax’ Kamermans suggested, the best way would be detect mouse click and add item dynamically. You can customize the width and height of items by assigning values to item_width and item_height. var item_width=40; var item_height=40; var added_items=[]; $(function(){ $(‘.grid’).on(‘click’, function(e){ var x = e.pageX – $(this).offset().left; var y = e.pageY – $(this).offset().top; … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,3474,333],"class_list":["post-12835","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-css-grid","tag-javascript"],"yoast_head":"\n[Solved] CSS huge grid problems - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] CSS huge grid problems - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] as Mike ‘Pomax’ Kamermans suggested, the best way would be detect mouse click and add item dynamically. You can customize the width and height of items by assigning values to item_width and item_height. var item_width=40; var item_height=40; var added_items=[]; $(function(){ $('.grid').on('click', function(e){ var x = e.pageX - $(this).offset().left; var y = e.pageY - $(this).offset().top; ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-01T20:58:04+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] CSS huge grid problems\",\"datePublished\":\"2022-10-01T20:58:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/\"},\"wordCount\":43,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"css-grid\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/\",\"name\":\"[Solved] CSS huge grid problems - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-01T20:58:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] CSS huge grid problems\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] CSS huge grid problems - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] CSS huge grid problems - JassWeb","og_description":"[ad_1] as Mike ‘Pomax’ Kamermans suggested, the best way would be detect mouse click and add item dynamically. You can customize the width and height of items by assigning values to item_width and item_height. var item_width=40; var item_height=40; var added_items=[]; $(function(){ $('.grid').on('click', function(e){ var x = e.pageX - $(this).offset().left; var y = e.pageY - $(this).offset().top; ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/","og_site_name":"JassWeb","article_published_time":"2022-10-01T20:58:04+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] CSS huge grid problems","datePublished":"2022-10-01T20:58:04+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/"},"wordCount":43,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","css-grid","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/","url":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/","name":"[Solved] CSS huge grid problems - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-01T20:58:04+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-css-huge-grid-problems\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] CSS huge grid problems"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/12835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=12835"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/12835\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=12835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=12835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=12835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}