Grid Sections

In the Grid Sections phase, you create reusable section blocks that can later be assembled into complete pages. Here, you use the fundamental principle of CODEFLUSS: Everything is 100% Grid-based.

The Principle: What You See Is What You Get (WYSIWYG)

In contrast to classic, deeply nested box models (Flexbox, Div containers), we use an absolute CSS Grid System as the basis for the canvas (workspace).

This allows you to position elements precisely via drag-and-drop:

• Simplicity: No complicated nesting of containers is necessary anymore.
• Speed: Visually position elements exactly where they belong.
• Responsiveness: The Grid system allows you to adjust the positioning and size of the elements separately and specifically for different viewports (Desktop, Tablet, Mobile).

How it works: Drag & Drop

1. Find Components: In the left sidebar ("Components"), you will find elementary building blocks such as Text, Image, Button, etc.
2. Drag onto the Canvas: Simply drag a component into the editor while holding down the mouse button.
3. Place in the Grid: The canvas is divided into columns. Release the element at the desired grid position.
4. Resize: Drag the edges of the element to span it across multiple grid columns.

This system guarantees that your layouts remain absolutely standard-compliant, even if you design completely asymmetrical and modern layouts!

Viewport Management

At the top of the editor, you will find the Viewport Control:

• Desktop
• Tablet
• Mobile

Toggle between viewports to fine-tune the positioning of components in the Grid Section for each size. Changes to the positioning in the mobile view do not affect the desktop layout.

The system saves the layouts locally based on the "Draft vs Save" principle, so you can try out layouts without any risk. Read more about the seamless save cycle of our platform in the Layouts Overview.