Escape the limitations of basic builders. Generate pristine, fully responsive CSS Grid code featuring 10 advanced properties including Auto-Flow Dense, independent gaps, content alignment, and implicit rows.
/* CSS loads here */
Welcome to the Advanced CSS Grid Generator. This tool exposes 10 complex CSS Grid properties that are difficult to write manually. Below is a step-by-step English guide on how to use these new features and what they do to your layout.
Instead of a single `gap` property, you can now define `row-gap` and `column-gap` independently.
Example: If you are building a photo gallery where images should be tightly packed horizontally but spaced out vertically for text descriptions, you would set Column Gap to `10px` and Row Gap to `40px`.
The `grid-auto-rows` property dictates the height of implicitly created rows (rows that the grid creates automatically when items wrap).
Example: Selecting `100px` forces every row to be exactly 100px tall. Selecting `minmax(100px, auto)` ensures rows are at least 100px tall, but will expand if the content inside them requires more space.
`grid-auto-flow` controls the auto-placement algorithm. By default, it places items row by row.
Example: If you check the "Item 1: Span 2 Columns" box, you might see empty gaps in your grid. By changing Auto Flow to `row dense`, the grid will attempt to pack smaller items into those empty gaps earlier in the grid, creating a seamless "Masonry" effect.
Unlike `align-items` which moves content *inside* a cell, `align-content` and `justify-content` move the *entire grid track* inside the main container.
Example: To test this, increase the "Container Height" slider to `600px`. Then change "Align Content" to `center`. You will see the entire block of grid items move to the vertical center of the container box. Use `space-between` to push the rows to the absolute top and bottom edges.
CSS Grid allows individual child items to break the rules. By toggling "Span 2 Columns" or "Span 2 Rows", we inject the `grid-column: span 2` or `grid-row: span 2` property using the `:first-child` pseudo-selector.
Example: This is perfect for creating "Featured Articles" on a blog layout, where the newest post takes up double the space of the older posts. Combine this with `grid-auto-flow: dense` for advanced layouts.
A simple but essential UI design tool. Adjusting the Item Radius slider instantly changes the `border-radius` of all generated grid children, adding the exact pixel value to the output CSS code.