CSS Grid Generator

WHAT IT DOES

CSS Grid Generator creates complete CSS grid layout code with a live visual preview showing exactly how your grid will look. Define grid-template-columns and grid-template-rows using any valid CSS values (fr units, px, %, auto, repeat()). Set gap, align-items, and justify-items to control spacing and alignment. The preview displays colored grid cells representing your layout, with the actual number of columns and rows shown. Choose from six preset grid templates: 3 Columns, 2 Columns, 4 Columns, Masonry, Dashboard, and Gallery. Copy the generated CSS code to your clipboard with one click.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All grid generation, preview rendering, and code formatting occur on your machine without any network requests. No grid data, generated code, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox. CSS grid generation uses standard CSS syntax.

HOW TO USE

Click the extension toolbar icon to open the CSS Grid Generator panel. Enter grid-template-columns values (e.g., "1fr 1fr 1fr" for three equal columns). Enter grid-template-rows values (e.g., "auto" or "100px 200px"). Set the gap value in pixels (0-100). Select align-items (Stretch, Start, Center, End) to control vertical alignment. Select justify-items (Stretch, Start, Center, End) to control horizontal alignment. The preview updates in real time showing colored grid cells. The output area displays the generated CSS code. Click "Copy" to copy the code to your clipboard. Click a preset button (3 Columns, 2 Columns, 4 Columns, Masonry, Dashboard, Gallery) to load a pre-configured grid. Select the output format (CSS, SCSS, or Less) to match your workflow.

THE CSS GRID GENERATION ENGINE — WHY IT WORKS

Most grid generators use simple string concatenation without validation or preview. This tool uses a structured approach: it reads the columns and rows values from the inputs, parses them to determine the number of columns and rows, and generates the CSS code with proper syntax. The preview engine creates a grid container using the same values, then generates colored cell elements to show the layout visually. The number of items displayed is calculated as columns × rows, with up to 12 items shown to keep the preview clean. The alignment options are applied using align-items and justify-items properties. The preset system loads pre-configured values for common grid patterns. The output formatter supports CSS, SCSS, and Less variable syntax. This approach gives you a complete, visual understanding of your grid layout before you use it in your project.

THE PANEL

The CSS Grid Generator panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the input controls, preview, and output area adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to generate grid layouts in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. The tool generates grid CSS code but does not modify your website automatically—you must copy and paste the code into your stylesheet. The preview uses a fixed container; the actual appearance may vary depending on the element dimensions. The columns and rows values must be valid CSS grid values; invalid values will still generate code but the preview may not work. All grid data is processed locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.