CSS Grid is a two-dimensional layout system for the web. It lets you create complex layouts with rows and columns, making it perfect for page layouts and component design.

Grid is two-dimensional (rows AND columns), ideal for page layouts. Flexbox is one-dimensional (row OR column), better for component layouts. They work great together.

fr stands for 'fraction'. 1fr takes one fraction of available space. So '1fr 2fr' creates two columns where the second is twice as wide as the first.

Use repeat(3, 1fr) for 3 equal columns, or repeat(4, 1fr) for 4 equal columns. The fr unit distributes space equally among columns.

grid-template-areas lets you name regions of your grid and place items by name. It creates a visual ASCII-art representation of your layout in CSS.

Use grid-column: span 2 to span 2 columns, or grid-row: span 2 for rows. You can also use explicit line numbers like grid-column: 1 / 3.

gap (formerly grid-gap) sets spacing between grid items. Use a single value for equal gaps, or two values for row-gap and column-gap separately.

Yes! minmax(200px, 1fr) creates columns that are at least 200px but grow to fill space. Great for responsive designs without media queries.

CSS Grid is supported in all modern browsers: Chrome, Firefox, Safari, Edge. IE11 has partial support with -ms- prefix and older syntax.

Use place-items: center on the container, or justify-self and align-self on individual items. This centers content within grid cells.

Preview

CSS Code

Columns

Rows

Gap

Justify Items

Align Items

Presets

Related Tools