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.

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 this tool works

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>; } `

Worked example

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.