Build a CSS Grid layout by setting the size of each column and row, then click or drag across cells to merge them into named areas such as header, sidebar and main. The preview updates as you go, and you get the CSS, matching HTML and Tailwind classes to copy. A Flexbox tab covers simple rows and wrapping card lists. Everything runs in your browser. Nothing you type or paste is sent to We.Inc or anyone else.
The classic layout of header on top, sidebar and main in the middle and footer at the bottom is two columns and three rows. With columns set to 240px 1fr and rows set to auto 1fr auto, the areas read: "header header" "sidebar main" "footer footer". Load the example to see it, then change the sidebar width or add a column for a right-hand panel.
Because the layout lives in the parent, you can rearrange it for small screens in a media query by redefining grid-template-areas with one column, without touching the HTML order.
If the layout collapses on your site, check that every child has the grid-area name that appears in the template, that the parent has display: grid, and that no area is L-shaped. A misspelt area name makes the child fall into the next free cell instead.
Content wider than its track (a long word or a wide image) can push a 1fr column wider than you expect. minmax(0, 1fr) instead of 1fr lets the column shrink below its content width.
It writes the grid-template-columns, grid-template-rows, gap and grid-template-areas CSS for the layout you set visually, so you do not have to count tracks by hand. You copy the CSS and HTML into your own site.
1fr takes one share of the leftover space. auto sizes the track to its content. minmax(200px, 1fr) keeps a track at least 200px wide but lets it grow to one share. Fixed px values never change.
Each quoted string is one row, and each word in it is one column. Repeating a name across cells stretches that area over them. A dot (.) leaves a cell empty. Each child element then uses grid-area: name to go into its area.
Yes. Column and row templates become arbitrary values such as grid-cols-[240px_1fr], and named areas become [grid-template-areas:...] plus [grid-area:name] on each child. These work in Tailwind v3 and v4 with no plugin.
Use grid when you care about both rows and columns lining up, such as a page shell or a gallery. Use flexbox for one direction, such as a row of buttons or a nav bar. They are often combined: a grid page with flex rows inside.
You can hand-code one. If you would rather not write CSS, We.Inc builds and hosts a site for you from a description. The free plan gives you up to 3 template sites on a we.inc address, with no AI credits and no custom domain. Paid plans are Starter at $20 a month (AI building and custom domains), Pro at $50 and Max at $99.
Related: CSS Shadow Generator, HTML Table Generator, Website Mockup Generator, Website builder, Landing page templates, Pricing.
Turn this result into your website or see the We.Inc website builder. The free plan gives you up to 3 template sites on a we.inc address, with no AI credits and no custom domain. Paid plans are Starter at $20 a month, Pro at $50 and Max at $99. See pricing.
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.