CSS
HTML
How to use the CSS Grid Generator
CSS Grid is the most flexible way to build two-dimensional page layouts, but writing grid-template and grid-area rules by hand takes trial and error. This generator lets you draw the layout and gives you ready-to-use CSS and HTML.
- Set the number of columns and rows and the gap in pixels.
- Click and drag across the cells to create an area. Name it if you like.
- Move areas by dragging them and resize them with the corner handle.
- Copy the generated CSS and HTML into your project.
Frequently asked questions
What is CSS Grid?
CSS Grid Layout is a CSS module for placing elements in rows and columns at the same time. You define the grid on a container and position children with grid-column and grid-row.
Is CSS Grid supported in all browsers?
Yes. All current versions of Chrome, Edge, Firefox and Safari, on desktop and mobile, support CSS Grid.
What does the fr unit mean?
fr is a fraction of the free space in the grid container. repeat(3, 1fr) creates three equal columns that share the available width.
Should I use Grid or Flexbox?
Use Grid for two-dimensional layouts such as page structures and card grids. Use Flexbox for one-dimensional alignment such as navigation bars or button rows. They work well together.