Build CSS grid layouts visually. Adjust columns, rows and gaps and get clean CSS code instantly.
CSS Grid is a two-dimensional layout system for the web. It lets you create complex layouts with rows and columns without needing floats, positioning hacks, or third-party libraries. Grid is now supported in all modern browsers and is the preferred way to build page layouts.
The key properties are grid-template-columns which defines the column widths, grid-template-rows which defines the row heights, and gap which controls the spacing between cells. The fr unit is a fractional unit that distributes available space proportionally.
repeat(3, 1fr) creates three equal columns. repeat(auto-fill, minmax(200px, 1fr)) creates as many columns as fit at a minimum of 200px each. 1fr 2fr 1fr creates three columns where the middle one is twice as wide as the others.
The fr unit stands for fraction. It distributes the available space in the grid container. 1fr 1fr gives two equal columns. 1fr 2fr gives two columns where the second is twice the width of the first.
Gap applies spacing between grid cells without affecting the outer edges of the grid. Margin applies spacing around individual elements. Use gap for consistent internal spacing in a grid layout.