Size your columns and rows, drag across the grid to draw named areas like header, sidebar and main, then give phones and tablets their own arrangement. Switch the preview to sample content to see it as a page, and copy the result as plain CSS, HTML, Tailwind classes or a React component. Everything runs in your browser.
Flexbox lays things out along one line at a time. You give it a row or a column of items and it shares out the space along that line, wrapping onto new lines if you let it. Each line is worked out on its own, so items in one wrapped line do not line up with items in the next. That makes flexbox the natural fit for a nav bar, a row of buttons, a toolbar, the inside of a card, or centering one thing inside another.
Grid works in two directions at once. You decide the columns and rows on the parent, and children drop into those tracks, so everything in a column lines up with everything above and below it. That makes grid the better choice for a page shell, a dashboard, a photo gallery or a bento layout, where the arrangement is the point. Grid also lets you change the arrangement at a breakpoint without touching the HTML.
A quick test: if you are thinking in terms of 'these items, one after another', use flexbox. If you are thinking in terms of 'this goes top left and spans two columns', use grid. Most real pages use both: a grid for the overall layout, with flex rows inside the header and cards.
The holy grail preset is the classic shape: a full-width header, three columns in the middle and a full-width footer. On desktop the columns are 200px, minmax(0, 1fr) and 200px. On tablets the right-hand column drops below the content, and on phones every area stacks in one column. Because the arrangement lives in grid-template-areas on the parent, the same five child elements serve all three sizes.
When you design the phone layout first, think about order: what should someone see after the header? Usually the main content, with navigation tucked into a menu and secondary panels after it. Draw the phone layout in that order, then spread things out for larger screens.
The auto-fit preset writes grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)). The browser fits as many 240px columns as the container allows, then stretches them to fill the row. The min(240px, 100%) part stops a single card from overflowing on a screen narrower than 240px.
This approach responds to the width of the container, not the screen, so the same component works in a full-width section and in a narrow sidebar. Use breakpoints and named areas when sections need to move around; use auto-fit when you simply have a list of similar items.
Yes, with no signup and no limit. The layout is built in your browser and nothing you enter is sent to We.Inc. The share link keeps the layout after the # sign in the address, which browsers do not send to servers.
1fr is one share of the space left after fixed tracks are placed. auto sizes the track to its content and can also stretch. minmax(200px, 1fr) never goes below 200px but can grow to one share. Fixed values like 240px never change.
Each quoted string is one row and each word inside it is one column. Writing the same name in neighbouring cells makes that area span them, and a dot leaves a cell empty. Each child then gets grid-area: name. Every name has to cover a full rectangle, or the browser ignores the whole grid-template-areas value.
Mobile first. The phone layout is the base rule, then @media (min-width: 768px) holds what changes for tablets and @media (min-width: 1024px) what changes for desktops. Only properties that differ from the size below are repeated. The Tailwind output uses md: and lg:, which are the same 768px and 1024px breakpoints.
Both create as many columns as fit. When there are fewer items than columns, auto-fit collapses the empty columns so the items stretch across the row, while auto-fill keeps the empty columns so items stay the same width. With a full row of items they look the same.
No. Column and row sizes become arbitrary-value classes such as grid-cols-[200px_minmax(0,1fr)_200px], and named areas become [grid-template-areas:...] on the container plus [grid-area:name] on each child. These work in Tailwind v3 and v4 without extra setup.
The child still has grid-area set to a name the template does not define, so the browser places it in an extra row and column outside your grid, which usually looks broken. The tool warns you. Either draw the area at that size too, or hide that element at that size in your own CSS.
Related: Flexbox generator, CSS shadow generator, Color palette generator, Website mockup generator, HTML table generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.