CSS Grid Generator

Visually generate CSS Grid code for modern website layouts.

Tools
CSS Grid Generator
Add to Favorites Remove from Favorites Share on Facebook Share on X

Use the form below to generate CSS Grid code. CSS Grid Layout is a powerful two-dimensional system for creating complex web page layouts. Experiment with container and item properties, see the result in the live preview, and get the generated HTML and CSS.

Container Properties
e.g., 1fr 1fr 1fr, 100px auto 1fr, repeat(auto-fit, minmax(150px, 1fr))
e.g., auto, 100px 200px auto, repeat(2, 150px)
e.g., 15px, 10px 20px (row column)

Grid Item #1
e.g., auto, 1 / 3, span 2, 2 / span 3
e.g., auto, 2 / 4, span 3, 1 / span 2

CSS Code

Place this CSS code in the <style> section of your HTML document or in an external CSS file.

Copy

HTML Code

Place this HTML code in the <body> section of your HTML document.

Copy

About the CSS Grid Generator Tool

Master modern web layouts with our interactive CSS Grid Generator. This tool provides a visual interface to experiment with CSS Grid properties, allowing you to build complex, two-dimensional layouts effortlessly. See your changes reflected in real-time in the preview pane and generate the precise HTML and CSS code needed for your project.

What is CSS Grid Layout?

CSS Grid Layout is the most powerful layout system available in CSS. It excels at dividing a page into major regions or defining the relationship, in terms of size, position, and layer, between parts of a control built from HTML primitives. Unlike Flexbox, which is largely one-dimensional (either row or column), Grid is two-dimensional, managing both columns and rows simultaneously.

Key Grid Container Properties You Can Control:

  • display: Set the container to grid or inline-grid to initialize the grid formatting context.
  • grid-template-columns / grid-template-rows: Define the size and number of your columns and rows using lengths, percentages, or the flexible fr unit (which represents a fraction of the available space). Use powerful functions like repeat() and minmax() for advanced, responsive track sizing.
  • gap (row-gap, column-gap): Easily specify the spacing (gutters) between grid rows and columns.
  • justify-items / align-items: Control the default alignment of all items *within* their grid cells along the row (inline) and column (block) axes respectively. Options include start, end, center, and stretch.
  • justify-content / align-content: Align the entire grid structure *within* the container when the total size of the grid tracks is less than the container size. This applies along the row (inline) and column (block) axes, with options like start, end, center, space-between, space-around, and space-evenly.

Key Grid Item Properties You Can Control:

  • justify-self / align-self: Override the container's default justify-items and align-items settings for individual grid items, allowing precise control over placement within their cells.
  • order: Change the visual order of grid items without altering the HTML source order, useful for accessibility and responsive design adjustments.
  • width / height: While grid tracks often define size, you can still set explicit dimensions on individual items if needed.
  • (Note: Advanced properties like grid-column and grid-row for item spanning are not included in this basic generator but are fundamental to complex grid layouts).

This CSS Grid Generator simplifies the process of creating grid-based layouts, making it faster to prototype, learn, and implement powerful, responsive designs for your websites and applications.

For in-depth learning, check out the MDN Web Docs on CSS Grid Layout.

Tools