OnSumoTools

CSS Grid Visual Builder

This tool builds CSS Grid layout code visually. Define your columns and rows, set gap values, drag items into grid areas, and the tool outputs the complete CSS for both the grid container and each child element. A live preview updates as you make changes. Everything runs in your browser. No data is sent to any server.

How does the CSS Grid Builder work step by step?

CSS Grid is a two-dimensional layout system. You define a grid on a container element and then place child elements into specific cells or areas. The two key properties are grid-template-columns (defining column widths) and grid-template-rows (defining row heights). Container formula: `css .container { display: grid; grid-template-columns: <col-1-width> <col-2-width> ...; grid-template-rows: <row-1-height> <row-2-height> ...; gap: <row-gap> <column-gap>; } `

What does a typical CSS Grid Builder result look like?

You need a classic two-column layout with a full-width header and footer. Grid definition: - Columns: 240px 1fr (fixed sidebar, flexible main) - Rows: auto 1fr auto (header auto-height, main fills remaining, footer auto-height) - Gap: 16px

Frequently asked questions

  • What is the fr unit and when should I use it?

    The fr unit stands for \\\\\\\"fractional unit\\\\\\\" and represents a share of the available space in the grid container. Use it for columns or rows that should fill remaining space proportionally. For example, grid-template-columns: 200px 1fr 1fr creates a 200px fixed sidebar and two equal fluid columns that fill the rest of the container. Use fixed pixel or rem values when a column must be an exact width regardless of the container.

  • What is the difference between CSS Grid and Flexbox?

    CSS Grid is two-dimensional: it controls layout in both rows and columns simultaneously. Flexbox is one-dimensional: it controls layout in either a row or a column at a time. Use Grid for page-level layouts and complex component grids where you need to align items across both axes. Use Flexbox for simpler, single-axis arrangements like navigation bars, button groups, and card content alignment.

  • Does the tool support subgrid?

    The current version generates Level 1 CSS Grid layouts. The subgrid value (CSS Grid Level 2) lets nested grids inherit their parent's track definitions. Subgrid is supported in Firefox and Chrome 117+ but is still being adopted. A subgrid option is planned for a future update.

  • What happens to items that do not have an explicit grid placement?

    Items without explicit grid-column or grid-row rules are placed automatically by the browser using the auto-placement algorithm. The algorithm fills in cells left-to-right, top-to-bottom. You can control this with grid-auto-flow: dense to fill gaps. The tool shows auto-placed items in the preview so you can see how the algorithm arranges them.

  • Can I use named lines instead of numbered lines?

    Yes. The tool supports naming grid lines using the [name] syntax in grid-template-columns and grid-template-rows. Named lines are an alternative to grid-template-areas for placing items. The tool lets you name lines in the column and row inputs and then reference those names in item placement fields.

  • How do I make a CSS Grid layout accessible?

    CSS Grid controls visual order, but screen readers follow the DOM order of elements. Make sure your HTML source order matches the logical reading order, regardless of how grid placement reorders the visual appearance. The tool does not change your HTML, so accessibility depends on your markup structure. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

Related tools

Draw the layout, get the code

CSS Grid is powerful, but placing items by line numbers is hard to picture. This builder shows a grid you can click and drag across. Span cells, and the tool writes the grid-column and grid-row values for you. If items overlap, you get a warning.

The fr unit

fr means a fraction of the free space. grid-template-columns: 1fr 2fr gives the second column twice the width of the first. Mix fr with fixed sizes: 240px 1fr makes a sidebar and a flexible main area. It's more readable than percentages, and it accounts for gaps.

Grid or Flexbox

If you're thinking about rows and columns together, use Grid. If you're lining things up along one line, use Flexbox. Grid shines for page structure, dashboards and galleries. Nothing stops you from nesting one in the other.

Items without a placement

Items you don't place flow into the next free cell, in source order. That's auto-placement, and it's fine for galleries. Set explicit placement only for items that need a specific spot.

Named lines let you write grid-column: sidebar-start / main-end instead of numbers. They help on bigger layouts. Subgrid lets a child grid use its parent's tracks, and it's supported in current browsers, though this builder focuses on the main grid.

Accessibility

Grid lets you place items visually in any order. Keep the HTML order logical, since keyboard focus and screen readers follow the source, not the picture. If the visual order and DOM order disagree, people get lost.

Your layouts stay in your browser.

When Grid beats Flexbox

Grid is built for layouts where rows and columns both matter. A magazine page, a dashboard with tiles of different sizes, a photo gallery with a tall item: all natural for Grid. Flexbox handles one direction at a time.

Define columns with fr units to split space, like 1fr 2fr 1fr. Use repeat and minmax for responsive grids that add columns as the screen widens.

Click and drag cells in the builder to place items and copy the code.

Naming areas

Grid template areas read like a sketch of the page. Name them header, sidebar, main and footer, and rearrange them in a media query for phones. It's easier to read than line numbers.