Design CSS grid layouts visually — set columns, rows, gaps and named areas, then copy production-ready CSS and HTML instantly.
Fill in the fields or paste your input text. Click Sample to load an example and see the tool in action.
Press the main button to process your input. Results appear instantly — all processing runs in your browser, no upload needed.
Check the output panel. Any errors are shown in a red bar with a clear description so you can fix the input quickly.
Click Copy to copy to clipboard, or Download to save the result as a file.
CSS Grid is a two-dimensional layout system for the web. It lets you place elements into rows and columns, giving you precise control over layout that was previously very hard to achieve.
fr stands for "fractional unit". It represents a fraction of the available space in the grid container. For example, 1fr 2fr gives you two columns where the second is twice the width of the first.
Use repeat(auto-fill, minmax(200px, 1fr)) to create a grid that automatically adjusts the number of columns based on available width — no media queries needed.
grid-template-areas lets you name regions of your grid using strings. You assign elements to named areas with grid-area, making complex layouts very readable.
Yes. The generated CSS and HTML are clean, minimal, and ready to paste directly into your project. No extra dependencies or frameworks required.
gap (formerly grid-gap) adds space between grid cells only — not outside the grid container. Margin adds space around individual elements and can push the grid outward.
