Logobild des Artikels für DevPora Grid

DevPora Grid

devpora.com
Medienelement 1 (Screenshot) für DevPora Grid

Übersicht

Ausrichtungsraster und Layout-Hilfen für Entwickler und Designer.

# DevPora Grid Alignment grid and layout guides for developers and designers — directly on any web page. ## Purpose DevPora Grid is a lightweight browser extension that overlays visual guides on top of the page you are working on. It helps you check spacing, alignment, centering, and container widths without leaving the browser or opening DevTools. Perfect for frontend development, UI reviews, landing page builds, and Tailwind CSS workflows. ## Key Features - **Pixel grid** — 2, 4, 8, 16, 20, 40, or 100 px; customizable grid color - **Grid from page center** — lines radiate symmetrically from the viewport center - **Page center** — vertical and horizontal center lines based on the viewport (toggle independently) - **Tailwind max-w guides** — dashed lines for `max-w-xs` through `max-w-7xl` - **mx-auto centering** — containers drawn centered on the page, as with `mx-auto` - **Labels** — breakpoint name; optional detail row (px, rem, offset from edge) - **Rulers** — tick marks from the edge and from the center, in px, rem, or both; adjustable interval - **Per-layer toggles** — enable only what you need (grid, center, Tailwind, rulers) - **Overlay visibility** — slider to control overlay strength on the page - **UI languages** — SK, EN, CZ, PL, DE - **Persistent settings** — your preferences are saved locally and restored after refresh ## Privacy - no account required - no external API calls - no data sent to any server - settings stored locally in the browser only - works offline ## Intended Audience - frontend developers - UI/UX designers - QA engineers checking layout and spacing - anyone building responsive pages with Tailwind CSS or similar frameworks DevPora Grid is a visual helper for layout work. It does not modify page content, collect analytics, or interfere with normal browsing when turned off.

Details

  • Version
    1.0.0
  • Aktualisiert
    26. Juni 2026
  • Größe
    101KiB
  • Sprachen
    5 Sprachen
  • Entwickler
    Ján Kuna
    Bobrovec 443 Bobrovec 03221 SK
    Website
    E-Mail
    janci.kuna@gmail.com
    Telefon
    +421 951 173 443
  • Händler
    Dieser Entwickler hat sich gemäß der Definition der Europäischen Union als Händler deklariert und sich verpflichtet, nur Produkte oder Dienstleistungen anzubieten, die den Gesetzen der EU entsprechen.

Datenschutz

Erweiterungen verwalten und Informationen zur Verwendung in deiner Organisation abrufen
Der Entwickler hat offengelegt, dass keine deiner Daten erhoben oder genutzt werden.

Dieser Entwickler erklärt, dass deine Daten

  • nicht an Dritte verkauft werden, außer in den genehmigten Anwendungsfällen
  • nicht für Zwecke genutzt oder übertragen werden, die nichts mit der Hauptfunktionalität des Artikels zu tun haben
  • nicht zur Ermittlung der Kreditwürdigkeit oder für Darlehenszwecke verwendet oder übertragen werden

Ähnliche

Toolkit by Will Myers

5,0

Pro Tools for Squarespace Designers & Developers

Measuremate — Pixel Ruler for Web Design

4,4

A pixel ruler for any live web page. Measure distances, inspect the box model, drop guides — DevTools stays closed.

Layout Grid for browser

4,5

You can set Layout Grid like design tools.

Screen Ruler - Das Web messen und untersuchen

4,3

Web-Inspektor für Designer & Entwickler. Elemente messen, CSS & Farben extrahieren, Screenshots aufnehmen & mehr.

CSS Spacing Inspector

0,0

Hover to see margin, padding, and gap overlays with pixel values

Crit Design

3,7

Crit Design, a designer co-pilot. Enhancing design process powered by AI

DevTools Suite

5,0

A collection of useful tools for developers and designers.

Border Patrol – CSS-Debugger und Element-Outliner

5,0

CSS-Box-Model-Debugger & Element-Outliner für schnelle UI-Inspektion, Layout-Visualisierung und Frontend-Entwicklung.

CSS Pro Editor & Debugger

4,6

Visual CSS styling and debugging tool for developers.

UI Inspector - Visueller CSS-Editor

4,0

Elemente und deren CSS direkt auf der Seite inspizieren und visuell bearbeiten für schnelleres Design und UI-Debugging.

WebSnatch

5,0

Extract design systems and generate AI prompts from any website.

Grid Overlay Tool

5,0

Add customizable grid overlays to any webpage for alignment checking

Toolkit by Will Myers

5,0

Pro Tools for Squarespace Designers & Developers

Measuremate — Pixel Ruler for Web Design

4,4

A pixel ruler for any live web page. Measure distances, inspect the box model, drop guides — DevTools stays closed.

Layout Grid for browser

4,5

You can set Layout Grid like design tools.

Screen Ruler - Das Web messen und untersuchen

4,3

Web-Inspektor für Designer & Entwickler. Elemente messen, CSS & Farben extrahieren, Screenshots aufnehmen & mehr.

CSS Spacing Inspector

0,0

Hover to see margin, padding, and gap overlays with pixel values

Crit Design

3,7

Crit Design, a designer co-pilot. Enhancing design process powered by AI

DevTools Suite

5,0

A collection of useful tools for developers and designers.

Border Patrol – CSS-Debugger und Element-Outliner

5,0

CSS-Box-Model-Debugger & Element-Outliner für schnelle UI-Inspektion, Layout-Visualisierung und Frontend-Entwicklung.

Google-Apps