Build CSS Grid Layouts Visually

CSS Grid Layout is the most powerful layout system available in modern web development. Unlike Flexbox, which is strictly one-dimensional, CSS Grid allows developers to manage complex, two-dimensional interfaces spanning both rows and columns simultaneously. However, grasping the syntax of minmax(), auto-fit, and named grid areas can be mathematically frustrating. The Black Claaw Tools CSS Grid Generator provides a visual, interactive interface to construct production-ready layouts instantly, bridging the gap between design vision and CSS code. We are also the only free tool with full CSS Subgrid support — letting you configure nested grids that align to parent track lines.

What Is CSS Grid?

CSS Grid Layout is a specification introduced to CSS to handle complex, grid-based user interfaces. Before Grid, developers relied on "hacks" like floating divs, table layouts, or 12-column frameworks (like Bootstrap) to build pages. CSS Grid brings a native, browser-supported 2D layout engine to the web. By applying display: grid; to a parent container, you unlock the ability to place child elements into specific cells, span them across tracks, and overlap them freely using z-indexes.

Grid Container vs Grid Items

To use CSS Grid, you must understand the relationship between the parent and the child.

Grid Container: The parent element. This is where you define the architecture of the grid — how many columns exist (grid-template-columns), how tall the rows are (grid-template-rows), and the spacing between them (gap).
Grid Items: The direct children of the container. While the container defines the blueprint, items can be specifically placed using grid-column and grid-row, or assigned to named areas with grid-area.

Understanding Fractional Units (fr)

The fr unit is exclusive to CSS Grid and represents a fraction of the available space. A grid with grid-template-columns: 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the others. Unlike percentages, fr units automatically account for gap spacing, making them the go-to unit for most grid layouts. In the track builder, you can set any column or row to 1fr with a single click.

auto-fit vs auto-fill

Both auto-fit and auto-fill work inside repeat() to create responsive grids without media queries.

auto-fit: Expands grid items to fill available space. Empty tracks collapse to 0px width — items grow to fill the row.
auto-fill: Fills the row with as many columns as possible, even if those columns are empty — it maintains the grid structure with placeholder cells.

Example: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) creates a fully responsive gallery without a single media query. Use the Gallery preset in the presets dropdown to see this in action.

What Is CSS Subgrid?

Subgrid is a CSS Grid Level 2 feature that solves a long-standing problem: aligning items inside a nested grid to the parent grid's track lines. Previously, if you placed a card component inside a grid cell and wanted its internal elements to align with the outer grid columns, you had to manually duplicate the column widths — a brittle and error-prone process.

With subgrid, a nested grid element can inherit its parent's column or row track definitions by setting grid-template-columns: subgrid and/or grid-template-rows: subgrid. The nested element's tracks then align perfectly to the parent's lines — no duplication required. This is revolutionary for component-based design systems, card grids, and form layouts where consistent alignment across components is essential.

In this tool, enable Subgrid on any item in the Items tab. You can enable it for columns, rows, or both independently. Use the children count stepper to visualize how many subgrid children appear inside the nested grid, and set a custom child gap to fine-tune the layout.

Named Grid Areas

The grid-template-areas property lets you define a visual map of your layout using named tokens. Each quoted string represents one row, and tokens in the same position across rows form a single named area. Use a dot (.) for empty cells.

Example for a Holy Grail layout:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

Then assign each child its area name: .header { grid-area: header; }. Our Areas tab provides a live color-coded area map preview as you type, making it easy to spot errors in your area string before they appear in your layout.

Grid Alignment Properties

CSS Grid provides a comprehensive alignment system operating on two axes:

justify-items / justify-self: Aligns items along the inline (horizontal) axis within their cell.
align-items / align-self: Aligns items along the block (vertical) axis within their cell.
justify-content: Distributes the entire grid along the inline axis when the grid is smaller than its container.
align-content: Distributes the entire grid along the block axis when the grid is smaller than its container.

The default value for all of these is stretch, which causes grid items to expand to fill their cell. The Container tab in this tool exposes all four container-level alignment properties, and the Items tab gives per-item overrides via justify-self and align-self.

grid-auto-flow: dense

By default, CSS Grid places items in the order they appear in the source. When items span multiple cells, this can leave "holes" in the layout. Setting grid-auto-flow: dense instructs the browser to backfill those holes with later, smaller items — useful for masonry-style galleries. Be aware that this changes the visual order of items, which can create accessibility issues if the reading order matters.

Responsive Grid Design Without Media Queries

CSS Grid's most powerful responsive capability comes from combining repeat(auto-fit, minmax()) with fractional units. This pattern creates layouts that adapt to any viewport width — from a single-column phone layout to a wide-screen multi-column grid — with a single CSS declaration and zero media queries.

The minmax(min, max) function defines a range for a track's size: it must be at least min pixels and at most max. For example, minmax(250px, 1fr) means each column is at least 250px wide but can grow to fill available space. Combined with auto-fit, columns wrap automatically when the viewport narrows below the minimum. Try the Gallery preset to see this in action.

Common Layout Patterns

Holy Grail: Header, footer, two sidebars, and a main content area. Classic page layout using named grid areas.
Dashboard: A sidebar plus a main area divided into statistics cards, charts, and data tables. Best built with explicit named areas.
Bento Grid: A mosaic of differently sized cards, popularized by Apple. Uses grid-column: span N and grid-row: span N to create visually varied sizes.
Masonry Gallery: Cards of varying height packed tightly. Use auto-fit with minmax() plus grid-auto-flow: dense.
Subgrid Card Grid: Cards that share column alignment across rows using grid-template-columns: subgrid. Perfect for product card grids where image, title, price, and CTA must align vertically across all cards.

Frequently Asked Questions

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, making complex responsive web designs easier.

What is the difference between Grid and Flexbox?

Flexbox is designed for one-dimensional layouts (either a row or a column). CSS Grid is designed for two-dimensional layouts (both rows and columns simultaneously). Use Flexbox for UI components and small-scale layouts; use Grid for page-level layout and complex component arrangements.

What is Subgrid and why does it matter?

Subgrid (CSS Grid Level 2) allows a nested grid element to inherit and align to its parent grid's track lines. This eliminates the need to manually duplicate track definitions in nested components, making it the single biggest quality-of-life improvement in CSS Grid since its introduction. Our tool is one of the only free tools that supports configuring and previewing subgrid layouts.

Which browsers support Subgrid?

Subgrid is supported in modern versions of Chrome (117+), Firefox (71+), Safari (16+), and Edge (117+). Global support exceeds 90% as of 2025. Always check caniuse.com/css-subgrid for the latest data.

What is auto-fit?

auto-fit expands grid items to fill available space, collapsing any empty tracks to 0px width.

What is auto-fill?

auto-fill fills the row with as many columns as it can fit, even if those columns are empty, maintaining the grid structure.

What is minmax()?

minmax() is a CSS Grid function that defines a size range for a track, setting a minimum and a maximum allowed size (e.g., minmax(200px, 1fr)).

Can I export HTML and CSS?

Yes! This generator provides live, production-ready HTML and CSS output (plus SCSS) that you can copy or download directly as an HTML file.

Is CSS Grid responsive?

Highly. Using features like fractional units (fr), repeat(auto-fit), and minmax(), you can create fluid layouts that adapt to any screen size without media queries.

Can I create dashboards?

Yes. This CSS Grid Generator includes templates for Dashboards, Holy Grail layouts, Bento Grids, and a Subgrid Demo that you can load and customize instantly.

Is this tool free?

Yes, the Black Claaw Tools CSS Grid Generator is 100% free to use with no sign-up required.

Does my layout leave my browser?

No. The entire visual builder and code generation engine runs securely on your local device via JavaScript. No data is sent to our servers.

CSS Grid Generator

Generated Code