CSS Layout Generator

Below you’ll find a CSS Layout Generator designed to help you build flexible, responsive page structures with ease. Create common layouts such as headers, sidebars, footers, and content areas using simple visual controls and instant previews. As you adjust the layout, the tool automatically generates clean, ready-to-use CSS and HTML, allowing you to copy the code directly into your project and speed up your workflow.
With thanks to CSS Portal for this CSS Layout Generator

🖥️

Note: This generator is best viewed on desktop computers for full control.

Layout settings

Page

Page width

FluidFixed

Grid gap

10px

Main color

Header

Include header

Height

80px

Color

Footer

Include footer

Sidebars

Sidebar width unit

PixelsPercent

Left sidebar

Width

150px

Color

Right sidebar

Layout preview

https://my-new-layout.com

Generated code

Copy & paste

Everything is worked out in your browser. The zip contains an index.html and a style.css file.

How to use it

The css layout generator will create the code necessary for the layout of a webpage.

Choose the page widthPick a fluid layout that fills the screen, or a fixed layout with a maximum width.
Add header and footerSwitch the header and footer on or off, then set their height and color.
Add sidebarsInclude a left and/or right sidebar, and set each width in pixels or as a percentage.
Finish the lookSet the gap between the areas and the color of the main content area. The preview updates as you go.
Check both sizesUse the Desktop and Mobile buttons to see how the layout stacks on small screens.
Copy or downloadCopy the HTML and CSS into your project, or download a zip with a ready-to-open index.html and style.css.

Good to know

Responsive by default

On screens up to 768px wide the areas stack in one column: header, left sidebar, main content, right sidebar, then footer.

Pixels or percent

Use pixels for sidebars with a fixed width, or percent for sidebars that grow and shrink with the page.

Try it first

The zip includes a small CSS reset, so you can open index.html straight away to see the layout in your browser.

Frequently asked questions

Does it use CSS Grid?

Yes. The layout uses CSS Grid with named areas, which is supported by all modern browsers. Each area (header, sidebars, main content and footer) is placed by name.

Why is the main area wider than I set?

The main content area has no width of its own. It takes all of the space left over by the sidebars and the gaps, so it always fills the page.

Can I change the mobile breakpoint?

Yes. The generated CSS has one media query, @media (max-width: 768px). Change 768px to the width you prefer.

Why do the header and footer text change color?

The text is set to black or white depending on how dark the background is, so it is always easy to read. You can remove or change the color line in the CSS.

Is anything uploaded?

No. The code and the zip file are created in your browser.