GridFlex 1.0.0.15

Grid Flex

Quick Presets

Generated CSS Grid

Cleanup Options

Choose which parts of your project you would like to clear. This action cannot be undone.

Clear All Content?

Are you sure you want to delete all blocks? Your Grid Layout settings will remain safe.

Reset Layout?

This will reset columns and rows to default. Your Items/Blocks will be preserved but may shift positions.

Delete Selected Block?

Are you sure you want to remove this block? This cannot be undone.

Overwrite Canvas?

You have unsaved changes on your canvas. Applying this preset will delete everything currently visible.

Notice

GridFlex Help Guide

Mastering the Grid

GridFlex is a visual layout designer for CSS Grid, where you export layouts to use in other projects

Canvas vs. Demo Mode

The Canvas is scaled down for speed and visibility while you build. Switch to Demo Mode for a 1:1 preview to see your layout exactly as it will appear in the real world before you export.

The Basics

Quick Buttons: Use canvas shortcuts for rapid row/column adjustments and adding blocks.
Click & Drag: Move and resize blocks to design your layout
Property Menu: Click the Menu icon (top-left) for deeper control over colors, naming, and sizing.
Presets: Don't start from scratch! Choose a common layout from the presets library.

Keyboard Shortcuts

Select a block to use these controls:

Del Delete the selected block.
↑ ↓ ← → Move the selected block around the grid.
Shift + Arrows Resize the block (expand/contract edges).

Export Production Code

Filename

.html

HTML Structure

CSS Styles