Grid Overlay – Figma Style Layout Grid for WordPress

Àpèjúwe

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Ìtumọ̀ Yorùbá: ’s useful for responsive design testing and pixel-perfect comparisons to your original designs.

  • Enable or disable the grid overlay at any time
  • Configure separate values for Mobile, Tablet, Desktop, and Extended screens
  • Set number of columns, gutter width, and outer margin
  • Lightweight and clean — outputs only what’s needed

Àwọn àwòrán ìbòjú

  • Settings screen with per-screen options

Ìgbéwọlẹ̀

  1. Upload the plugin folder to /wp-content/plugins/grid-overlay/
  2. Activate the plugin through the “Plugins” menu
  3. Go to Settings Grid Overlay and configure your options

FAQ

Will the grid show for visitors?

Yes — the overlay appears on the frontend when enabled. You can disable it anytime from the settings page.

Can I restrict the overlay to admin users only?

This version shows the grid for everyone if enabled. A future update might include visibility filters.

Àwọn àgbéyẹ̀wò

Kò sí àwọn àgbéyẹ̀wò fún plugin yìí.

Àwọn Olùkópa & Olùgbéejáde

“Grid Overlay – Figma Style Layout Grid for WordPress” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí.

Àwọn Olùkópa

Túmọ̀ “Grid Overlay – Figma Style Layout Grid for WordPress” sí èdè rẹ.

Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè?

Ṣàwárí koodu, ṣàyẹ̀wò ibi ìpamọ́ SVN, tàbí ṣe àgbékalẹ̀ sí àkọsílẹ̀ ìdàgbàsókè nípasẹ̀ RSS.

Àkọsílẹ̀ àwọn àyípadà

1.1.0

  • Major improvement: Refactored the frontend grid overlay to use real DOM-based columns instead of a repeating background gradient.
  • The new DOM-based method improves alignment accuracy by adjusting for scrollbar width differences (using corrected 100vw calculations).
  • This change resolves longstanding inconsistencies when aligning layouts against the grid across different browsers and screen sizes.

1.0.0

  • Initial release