Flexbox/Grid Layout Generator

Creëer en bekijk visueel lay-outs voor Flexbox en CSS Grid via een drag-and-drop interface. Bekijk real-time HTML en CSS-code om direct in uw projecten te gebruiken.

📐

Flexbox

1D layout generation

⊞

CSS Grid

2D layout generation

⚡

Real-time

Instant preview

⚠️ JavaScript must be enabled to use this tool.

auto_awesome Presets

settings_suggest Generator

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

visibility 📐 Visual Preview Drag the bottom of the dashed box to change height

code Generated CSS

about,

📖 About

An online tool to create CSS Flexbox and Grid layouts intuitively using a GUI. Visually design complex layouts using drag-and-drop or parameter adjustments.

Supports both Flexbox (justify-content, align-items, flex-wrap, etc.) and CSS Grid (grid-template-columns, gap, etc.). You can adjust properties while viewing the results in real-time preview.

All processing is done within the browser, and no data is sent to a server.

howto,

🔰 How To Use

Select layout mode

Select "Flexbox" or "CSS Grid" from the top tabs. You can also start with an optional preset.

Adjust properties

Modify container settings and specific item details (like flex-grow) to see how the layout changes in the right preview panel.

Copy the code

Copy the generated CSS and HTML code and paste it into your own web project.

glossary,

📚 Glossary

Flexbox: CSS3 layout module. Ideal for 1-dimensional (row or column) item placement, commonly used for navigation or card lists.
CSS Grid: CSS3 2-dimensional layout module. Powerful for structuring entire page layouts, controlling rows and columns simultaneously.
justify-content: Property to control item alignment along the main axis. E.g., center, space-between.
align-items: Property to control item alignment along the cross axis. E.g., center, stretch.

faq,

❓ FAQ

Q. How do I choose between Flexbox and Grid?: A. Generally, use Flexbox for 1-dimensional layouts (row or column only) and Grid for 2-dimensional layouts (both rows and columns). Using Flexbox inside components and Grid for the overall page layout is a common pattern.
Q. Can it generate responsive CSS?: A. It does not directly output media queries (@media), but you can generate basic responsive CSS by using `flex-wrap` or Grid's `repeat(auto-fit, minmax(...))`.
Q. Is IE11 supported?: A. The tool outputs modern CSS, so some features (especially Grid and gap) may not work correctly in IE11.