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.
