Place columns side by side at equal widths, even when they contain different amounts of text.
Cards on multiple rows
Arrange a collection of cards across multiple rows and choose how to use the space left over.
Text with a side index
Place text beside its index and move the index below the text when space becomes limited.
Your own example
Choose one of these layouts for a new situation, build it and explain your choices.
Before you begin
What you already know
Know how to add and select Boxes and text, assign a class and change breakpoints. The tutor can revisit a needed operation.
Your practice page
An editable Webflow practice page with a free area. You make the changes; publishing the project is not required.
Your tools
An AI assistant that accepts the lesson file or its full text. To check the exercises, you can use the Webflow MCP server if connected to your assistant, a Sandbox link with an available interactive browser, or screenshots and settings you describe. The MCP connection is optional.
AI-guided pilot
Build and explain three Flexbox patterns
Build the examples on your Webflow page with the tutor’s guidance. When useful, the tutor offers a short animation to open in your browser.
The animations show controls and changes in a reconstruction of the Webflow Designer. They open on separate pages and do not modify your project.
You can talk to the tutor in your own language, even though the lesson file is written in English. The written reference and animations are available in English and Italian.
The lesson file is enough to start: attach it to your AI assistant. The ZIP also contains the animation files, for assistants that can use them in the chat. You do not need the ZIP to open the animations online.
Attach the lesson file to a new conversation in your AI assistant. If attachments are unavailable, paste the whole file.
Write “Let’s begin”, or a short start message in your own language.
Start on a blank exercise page. The tutor helps you prepare it and agree how to check your work. You make the changes.
Use a free area on an editable Webflow page. Agree how to observe your work; no Webflow publication is required.
Which AI assistant should I use?
ChatGPT Work. Used in the author’s trials. The current tutor has also completed targeted checks in Work; those checks do not validate every lesson path.
Claude. In the browser, selected steps, animation links and recaps have been checked. The whole lesson has not been verified in this client.
Gemini. Compatibility is not verified. The tests did not establish a reliable conversation flow, so it is not currently recommended for this lesson.
Checks updated on 3 November 2026. Access to Webflow depends on the tools available in your conversation and must be verified with the tutor. Animations always have a dedicated browser page; viewing them inside the chat is optional and has not been verified across clients.
How will the tutor check my work?
You and the tutor choose an available route: Webflow MCP, a Sandbox link with an interactive browser (including ChatGPT Work where available), or screenshots and settings you report. The tutor verifies its actual access before relying on it. MCP is optional.
With Sandbox, you edit in the original Designer, wait for saving and tell the tutor. It reloads the same Sandbox to inspect the update. For a shared tab, use your assistant’s tab picker if it has one; otherwise provide the browser and URL. The tutor confirms the project and page.
Can I pause and resume?
Ask for a progress recap. In a new conversation, attach the lesson file and that recap. Access to your project must be checked again; conversations do not sync automatically.
Written reference and animations
The tutor offers a short animation when it can help. It shows where a control is or how an example changes in a reconstruction of the Designer. Open it in your browser, then return to the chat; you do not need to watch them all.
Basis is a starting size; final width also depends on available space and other constraints.
Wrap lets the parent form new rows; Grow distributes free space within each row.
Choose the widths at which the arrangement changes: for example, side-by-side columns on Desktop and stacked columns from Tablet down.
A minimum width protects one area but can leave the other too narrow and require a different arrangement.
A quick reference
You will work through three situations: equally important columns, a card collection whose size can change, and main content beside an index. Build the examples on your own Webflow page with readable content, then observe how they respond to different counts and widths.
Start with the result you want
The tutor asks for a prediction before an experiment. “I don’t know” is a valid reply: the comparison helps you understand the behavior rather than guess a control name or value.
Connect settings to their effects
Basis gives Flex children a starting size. Wrap allows new rows, and Grow distributes the space left on each row. You will explore how the properties work together and why an isolated setting does not describe the whole layout.
Check and apply
Compare wide and narrow views, then return to the starting view. In the final task, discuss three new needs and choose one section to plan, build and explain. The recap distinguishes help received from what you actually attempted.
During the lesson, the tutor may offer short animations that show where a Webflow control is and how using it changes the layout. The interface is a reconstruction of the Designer, the panel where you work in Webflow: it does not show or modify your project. Each animation opens on its own page and starts only when you play it. You can also advance without motion or read the text explanation.
To see what one looks like, you can open a column example. You do not need to watch it before starting: the tutor will offer it when useful.
No. Familiarity with the prerequisite operations helps. Your tutor revisits a needed step without requiring you to repeat other lessons.
Do I need to watch every animation?
No. The tutor offers a short animation when it can help you find a control or understand a change. You can open it in your browser and return to the chat, or continue with the written instructions.
Why does an animation ask me to return to the chat?
Some animations stop before showing a change. Return to the chat and tell the tutor what you think will happen, even if you are unsure. The tutor gives you a link to the next part so you can compare your idea with the result.
Help improve these tutorials
What helped, or where did you get stuck? Mention the lesson and the assistant you used. Please leave out private project information.
Your feedback is processed on this site through Cloudflare and sent to my email. I use your email to reply and do not use it for marketing. Technical request data is also processed to deliver the message and limit abuse. Privacy policy