{"id":229810,"date":"2025-04-18T12:05:52","date_gmt":"2025-04-18T12:05:52","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/figma-grid-overlay\/"},"modified":"2025-07-25T13:03:31","modified_gmt":"2025-07-25T13:03:31","slug":"grid-overlay","status":"publish","type":"plugin","link":"https:\/\/sw.wordpress.org\/plugins\/grid-overlay\/","author":444770,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1.0","stable_tag":"1.1.0","tested":"6.8.5","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Grid Overlay","header_author":"Themeist","header_description":"Add a Figma-style visual grid overlay to the frontend to test alignment and spacing in real time. Configure values for different screen sizes from the admin.","assets_banners_color":"fdf9fa","last_updated":"2025-07-25 13:03:31","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/themeist.com\/plugins\/wordpress\/grid-overlay\/","header_plugin_uri":"https:\/\/themeist.com\/plugins\/wordpress\/grid-overlay\/#utm_source=wp-plugin&utm_medium=grid-overlay&utm_campaign=plugins-page","header_author_uri":"https:\/\/themeist.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":497,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"hchouhan","date":"2025-04-18 12:04:55"},"1.1.0":{"tag":"1.1.0","author":"hchouhan","date":"2025-07-25 13:03:31"}},"upgrade_notice":{"1.0.0":"<p>First stable release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.jpg":{"filename":"icon-128x128.jpg","revision":3334004,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.jpg":{"filename":"icon-256x256.jpg","revision":3334004,"resolution":"256x256","location":"assets","locale":""},"icon.svg":{"filename":"icon.svg","revision":3334004,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3334004,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3334006,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3276705,"resolution":"1","location":"assets","locale":""}},"screenshots":{"1":"Settings screen with per-screen options"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[6210,854,225034,6040,8773],"plugin_category":[],"plugin_contributors":[77663,78700],"plugin_business_model":[],"class_list":["post-229810","plugin","type-plugin","status-publish","hentry","plugin_tags-alignment","plugin_tags-columns","plugin_tags-figma","plugin_tags-grid","plugin_tags-overlay","plugin_contributors-hchouhan","plugin_contributors-themeist","plugin_committers-hchouhan"],"banners":{"banner":"https:\/\/ps.w.org\/grid-overlay\/assets\/banner-772x250.jpg?rev=3334006","banner_2x":"https:\/\/ps.w.org\/grid-overlay\/assets\/banner-1544x500.jpg?rev=3334004","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/grid-overlay\/assets\/icon.svg?rev=3334004","icon":"https:\/\/ps.w.org\/grid-overlay\/assets\/icon.svg?rev=3334004","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/grid-overlay\/assets\/screenshot-1.png?rev=3276705","caption":"Settings screen with per-screen options"}],"raw_content":"<!--section=description-->\n<p>This plugin allows designers and developers to overlay a Figma-style layout grid on the frontend of their WordPress site to visually test alignment and spacing. It's useful for responsive design testing and pixel-perfect comparisons to your original designs.<\/p>\n\n<ul>\n<li>Enable or disable the grid overlay at any time<\/li>\n<li>Configure separate values for Mobile, Tablet, Desktop, and Extended screens<\/li>\n<li>Set number of columns, gutter width, and outer margin<\/li>\n<li>Lightweight and clean \u2014 outputs only what\u2019s needed<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to <code>\/wp-content\/plugins\/grid-overlay\/<\/code><\/li>\n<li>Activate the plugin through the \u201cPlugins\u201d menu<\/li>\n<li>Go to <strong>Settings \u2192 Grid Overlay<\/strong> and configure your options<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='will%20the%20grid%20show%20for%20visitors%3F'><h3>Will the grid show for visitors?<\/h3><\/dt>\n<dd><p>Yes \u2014 the overlay appears on the frontend when enabled. You can disable it anytime from the settings page.<\/p><\/dd>\n<dt id='can%20i%20restrict%20the%20overlay%20to%20admin%20users%20only%3F'><h3>Can I restrict the overlay to admin users only?<\/h3><\/dt>\n<dd><p>This version shows the grid for everyone if enabled. A future update might include visibility filters.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Major improvement: Refactored the frontend grid overlay to use real DOM-based columns instead of a repeating background gradient.<\/li>\n<li>The new DOM-based method improves alignment accuracy by adjusting for scrollbar width differences (using corrected 100vw calculations).<\/li>\n<li>This change resolves longstanding inconsistencies when aligning layouts against the grid across different browsers and screen sizes.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<\/ul>","raw_excerpt":"Visually check if your layout matches your design by overlaying a responsive grid on the frontend \u2014 inspired by Figma\u2019s layout grid system.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/229810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=229810"}],"author":[{"embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/hchouhan"}],"wp:attachment":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=229810"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=229810"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=229810"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=229810"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=229810"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=229810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}