Hey, I have a question for you? I have tried many methods, but the layout does not work out as I would like. How to create such an arrangement of elements like the one marked in red?
Hi there!
CSS Grid in Webflow is a powerful way to create custom element arrangements. Here’s how to set it up:
Start by adding a container element (section or div block) and set its display to Grid in the Style panel under Layout > Display. Click the “wrench” icon to enter grid edit mode for visual editing.
To customize your grid:
- Define columns and rows using the Grid Template Columns/Rows settings
- Adjust spacing between elements with Grid Gap
- Use the visual grid editor to drag and position items
- Create responsive layouts by adjusting grid settings for different breakpoints
You can also use Auto-flow settings to control how elements flow into the grid, and Justify/Align options to fine-tune element positioning within grid cells.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
What do you have built so far?
It helped! Thank you very much. I tried to do it myself in a similar way, but something didn’t work. Now it’s perfect. Thanks