Start with the structure, then add the details
Use the layout builder to arrange containers, headings, text, and other elements visually. Treat containers as meaningful groups: a hero, a set of cards, or an article with a sidebar. This makes the exported structure easier to understand and modify.
Choose Flexbox for a row or column of related items and Grid when rows and columns should align together. Start with a wide layout, then inspect the tablet and phone sizes. Fixed widths that look convenient on a desktop often need a more flexible alternative.
The builder gives you a starting layout, not a complete production application. Connect navigation, forms, and other behaviors yourself. When opening the result in the code editor, keep a backup of your existing editor project because the handoff replaces that local project.
Explore CSS Grid in more detail →