CSS Grid Generator

CSS Grid Layout is a two-dimensional layout system for the web. It lets you define rows and columns explicitly and place items precisely within a grid container. Unlike Flexbox (which is one-dimensional), CSS Grid handles both rows and columns simultaneously, making it ideal for complex page layouts like dashboards, magazine layouts, and holy grail designs.

The fr unit (fractional unit) represents a fraction of the available free space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first. Using 1fr 1fr 1fr creates three equal columns. It's the most flexible sizing unit in CSS Grid.

Named grid areas let you assign semantic names to regions of your grid using the grid-template-areas property. You name areas like 'header', 'sidebar', 'main', 'footer' and then place items using grid-area: header. This makes layouts more readable and easier to change without updating every item's position.

justify-items controls how grid items are aligned within their individual cell along the inline (horizontal) axis. justify-content controls how the entire grid track structure is aligned within the container when the grid doesn't fill the full width. Use justify-items for item alignment within cells, and justify-content for distributing space between tracks.

minmax(min, max) defines a size range for a grid track. The track will be at least 'min' but no larger than 'max'. For example, minmax(200px, 1fr) creates a column that's at least 200px wide but expands to fill available space. It's commonly used with repeat() and auto-fill/auto-fit to create responsive grids without media queries.

grid-auto-flow controls how the auto-placement algorithm fills in the grid. 'row' (default) places items by filling each row before moving to the next. 'column' fills each column first. 'dense' attempts to fill holes in the grid by placing smaller items in gaps left by larger items — useful for masonry-like layouts.