CSS Layout Generator

Free CSS layout generator for responsive Grid and Flexbox pages

Build a responsive page structure with Toolslight’s CSS Layout Generator. Choose one of six presets, adjust the header, navigation, sidebars and content area, then preview the layout on desktop, tablet and mobile. Copy editable HTML and CSS, download a standalone page, or export a project ZIP.

Developers can use the output as a starting shell for a website or application. Designers can compare page structures before adding finished content, and students can inspect how changing a layout setting changes its CSS. The exported structure uses native CSS without requiring Bootstrap, Tailwind or a JavaScript layout library.

This builder focuses on page regions: headers, navigation, main content, sidebars and footers. Use the Grid engine for track-based page structure or the Flexbox engine for a flexible shell. Both modes produce a single-column content row at your chosen mobile breakpoint.

Generate a responsive HTML and CSS layout

1. Choose a preset: Classic, Holy Grail, Dashboard, Blog, Landing Page or App Shell.
2. Choose the layout engine: CSS Grid or Flexbox. Inspect the CSS tab to compare their output.
3. Adjust the structure: enable the regions you need, set sidebar widths and choose the container width, gaps and padding.
4. Set mobile behavior: under Responsive & output, choose the breakpoint, whether each sidebar stacks or hides, and the visual order of the content.
5. Preview and export: compare Desktop, Tablet and Mobile, then copy the HTML/CSS or download your files. Open the exported page and test it with real content before using it in a project.

Six layout patterns to try in the generator

The dimensions below are preset starting values. You can change them in the controls. Header, navigation and footer height settings generate minimum heights, allowing their content to grow.

Classic: a responsive two-column layout

Choose Classic for a header, left sidebar, main area and footer. Its default Grid content row uses a 220px sidebar beside minmax(0, 1fr), which takes the remaining space. The page is centered with a 1200px maximum width and a 16px gap.

Try it: change the left sidebar width, then switch to Mobile. Choose Stack to place the sidebar in the content sequence, or Hide only when its content is available through another suitable route. This is a useful starting point for documentation or a small website with supporting navigation.

Holy Grail: a three-column layout with two sidebars

Choose Holy Grail for a header, navigation, left sidebar, flexible main column, right sidebar and footer. The default content tracks are 190px minmax(0, 1fr) 230px, with a 14px gap and a 1280px maximum page width.

Try it: leave both sidebars set to Stack and select Main content first. At the mobile breakpoint, the visual sequence becomes main content, left sidebar and right sidebar. The HTML reading order remains unchanged; review the accessibility guidance below before adding interactive content.

Dashboard: a workspace with a sticky sidebar

Choose Dashboard for a Grid-based application workspace with a 250px left sidebar, a flexible main area and a header. The default shell has no maximum-width cap, no footer and a 12px gap.

The sidebar uses position: sticky, an offset from the top and align-self: start. It remains part of the layout and sticks within its scrolling context; it is not a position: fixed overlay. Try it: toggle Sticky sidebars, export the page and add enough content to test scrolling. The mobile rules return the sidebar to normal positioning.

Blog: an article with a right sidebar

Choose Blog for a header, navigation, article area, right sidebar and footer. The default Grid content row is minmax(0, 1fr) 300px, with a 24px gap and a centered 1100px maximum-width shell.

Try it: keep related links in the right sidebar and compare Stack and Hide on mobile. Let the main article grow naturally, and test long titles, images and code blocks. The preset defines the page structure; add your own article typography and reading-width rules.

Landing Page: a single-column shell

Choose Landing Page for a header, main region and footer with no sidebars. Its default engine is Flexbox: the outer shell uses flex-direction: column, and the content row can grow. The preset starts with zero outer padding and gap, while retaining a 1200px maximum-width cap.

Try it: add your hero and page sections inside the main region. Set Container width to full width if you need an uncapped shell. A landing-page preset supplies the layout structure; your copy, images and components complete the page.

App Shell: an edge-to-edge application layout

Choose App Shell for a Flexbox-based header, a 240px left sidebar and a flexible main area. It starts without a footer, width cap, outer padding or gap. The sidebar uses flex: 0 0 240px, while the main region uses flex: 1 1 0.

Try it: add application navigation to the sidebar and compare its mobile stacking options. Compared with Dashboard, this preset starts with a different engine and tighter spacing. Routing, menus, authentication and application behavior belong to your project and are not included in the layout export.

CSS Grid vs. Flexbox: a developer reference

Choose Grid when rows and columns need a shared track structure. Choose Flexbox when arranging and distributing items along one main axis. You can combine them, such as Grid for the page shell and Flexbox for a toolbar inside the main region.

These are useful starting distinctions, not restrictions: Grid can size tracks from content, and Flexbox can use explicit sizes. Check support for the particular properties in your exported CSS if you must support older browsers. Selecting Flexbox here does not remove the mobile Grid rules.

Worked example: responsive Holy Grail CSS

Select Holy Grail, keep the CSS Grid engine, set the breakpoint to 768px, leave both sidebars on Stack, and choose Main content first. With the default class prefix, the content row has the following simplified markup. The header, navigation and footer sit outside this inner row.

<div class="page-layout__body">
  <aside class="page-layout__sidebar page-layout__sidebar--left">
    Left sidebar content
  </aside>
  <main class="page-layout__main">
    Main page content
  </main>
  <aside class="page-layout__sidebar page-layout__sidebar--right">
    Related content
  </aside>
</div>

This reduced excerpt shows the relevant generated rules. The complete export also includes the outer shell, spacing, minimum heights and appearance styles.

.page-layout {
  --left-width: 190px;
  --right-width: 230px;
  --layout-gap: 14px;
}

.page-layout__body {
  display: grid;
  grid-template-columns:
    var(--left-width) minmax(0, 1fr) var(--right-width);
  gap: var(--layout-gap);
  min-width: 0;
}

.page-layout__main,
.page-layout__sidebar {
  min-width: 0;
}

@media (max-width: 768px) {
  .page-layout__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-layout__main { order: 1; }
  .page-layout__sidebar--left { order: 2; }
  .page-layout__sidebar--right { order: 3; }
}

The fixed sidebars keep their configured desktop track widths. The center track takes the remaining available space after those tracks and gaps. minmax(0, 1fr) allows that track to shrink below its content’s automatic minimum; min-width: 0 allows the child region to shrink as well. Long content still needs an appropriate wrapping or scrolling rule.

At 768px and below, the row becomes a single column. order works on Grid items as well as Flexbox items, so it determines the visual sequence of these auto-placed regions. It does not move the HTML nodes or change their normal keyboard sequence.

If you choose Hide for a sidebar, the generator adds display: none for that sidebar inside the media query. When sticky sidebars are enabled, the mobile rules also set their position back to static.

The Desktop, Tablet and Mobile controls represent nominal widths of 1280px, 820px and 390px. With a 768px breakpoint, Tablet stays in the wide layout. The export has one adjustable breakpoint, so also test the downloaded page just above and below that boundary.

How the Flexbox desktop version differs

Switching to Flexbox replaces the desktop content-row sizing with the following approach. These base rules belong before the mobile media query in the stylesheet; the mobile content row still becomes Grid.

.page-layout__body {
  display: flex;
  gap: var(--layout-gap);
  min-width: 0;
  flex: 1 1 auto;
}

.page-layout__sidebar--left {
  flex: 0 0 var(--left-width);
}

.page-layout__main {
  flex: 1 1 0;
  min-width: 0;
}

.page-layout__sidebar--right {
  flex: 0 0 var(--right-width);
}

In flex: 0 0 190px, the numbers mean no growth, no shrinkage and a 190px starting basis. In flex: 1 1 0, the main region can grow and shrink from a zero basis. Inspect the complete export when switching engines so that obsolete Grid declarations are removed with the original desktop block.

Optional adaptation: use grid-template-areas

Named areas make a region-based layout easy to read. The current generator does not emit grid-template-areas; this is an alternative you can write after export. For the three-region row above, replace its desktop placement and mobile ordering rules with this version. Keep both sidebars present and set to Stack.

.page-layout__body {
  display: grid;
  grid-template-columns:
    var(--left-width) minmax(0, 1fr) var(--right-width);
  grid-template-areas: "left main right";
  gap: var(--layout-gap);
  min-width: 0;
}

.page-layout__sidebar--left {
  grid-area: left;
  order: 0;
}

.page-layout__main {
  grid-area: main;
  order: 0;
}

.page-layout__sidebar--right {
  grid-area: right;
  order: 0;
}

@media (max-width: 768px) {
  .page-layout__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "left"
      "right";
  }
}

Each string describes one grid row. If an area spans several cells, those cells must form a rectangle, and every row must have the same number of cells. Assign the matching name with grid-area. Changing the map changes visual placement, so named areas need the same source-order review as order.

Prevent overflow in real page content

Flexible tracks do not make every image, table or long URL fit automatically. Start with min-width: 0 on shrinking regions, then handle each content type deliberately. These are optional additions for your project, rather than rules currently emitted by the generator:

.page-layout__main img {
  max-width: 100%;
  height: auto;
}

.page-layout__main p,
.page-layout__main a {
  overflow-wrap: anywhere;
}

.page-layout__main pre,
.page-layout__main .table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

Wrap a wide table in an element with the table-scroll class when horizontal scrolling is appropriate. If your fixed sidebars leave too little room for the main column above 768px, raise the breakpoint or reduce the sidebar widths. Do not hide the entire page’s horizontal overflow to conceal clipped content.

Export and integrate the layout

Choose a class prefix appropriate to your project and check for existing stylesheet conflicts. Standalone files and downloaded styles include rules for html and body; review those before merging them into an established site. A prefix helps separate class selectors, but it is not complete CSS isolation.

In React, convert the markup to JSX, including class to className, then load the stylesheet. In WordPress, place the appropriate regions in your theme or component structure and enqueue the styles. Check the page’s existing landmarks and heading hierarchy before adding another header or main region.

The export is vanilla HTML/CSS. You can integrate it into a Bootstrap or Tailwind project, but it does not generate those frameworks’ utility classes. The online builder uses JavaScript; the exported layout does not need JavaScript to size, align or stack its regions.

Accessibility and final layout checks

• Use meaningful landmarks. Keep one visible <main> for the page’s primary content. Use <nav> for navigation and <aside> for supporting content. Page-level <header> and <footer> identify the overall page; headers and footers nested inside articles have different semantics. Give repeated navigation or complementary regions distinguishing labels.
• Choose a sensible DOM order. CSS order and named grid areas change visual placement. Normal screen-reader reading and keyboard navigation follow the underlying document. Review the exported markup and test Tab navigation at wide and narrow widths; use a skip link to help users reach the main content.
• Keep essential controls reachable. Hiding a sidebar removes its contents from view and normal keyboard access. Provide another accessible route to essential navigation or actions before choosing Hide.
• Test real content and zoom. Replace starter links and text, check focus visibility and color contrast, and test narrow widths, zoom, long headings, images and tables. Semantic elements are a starting point, not automatic accessibility certification.