CSS Grid Generator helps you quickly create two-dimensional grid layouts. Set columns, rows, and gaps through an intuitive control panel, customize each column and row size (supports fr, px, % and more). Preview layout in real-time, and get automatically generated CSS and HTML code ready to copy and use.
Core Grid Layout Concepts
CSS Grid is a powerful 2D layout system. grid-template-columns defines column structure, grid-template-rows defines row structure. The fr unit represents fractions of remaining space (e.g., 1fr 2fr means 1:2 distribution), auto adjusts to content, fixed values like 200px. gap sets row and column spacing uniformly.
Size Unit Comparison
- fr (fraction): Distribute remaining space proportionally, e.g., 1fr 1fr 1fr for 3 equal columns
- auto: Adjust based on content, common for navigation items
- px/em/rem: Fixed sizes, good for sidebars and fixed-width elements
- minmax(min, max): Set size range, essential for responsive layouts
Responsive Grid Layout Tips
Use repeat(auto-fit, minmax(250px, 1fr)) to create adaptive column counts: more columns when wide, fewer when narrow. Combined with gap and media queries, easily achieve responsive card layouts.
FAQ
Q: Should I use Grid or Flexbox?
A: Grid is ideal for 2D layouts (controlling both rows and columns), like overall page structure, card grids, and complex forms. Flexbox is better for 1D layouts (single row or column), like navigation menus and button groups. They can be combined.
Q: What are implicit and explicit grids?
A: Explicit grid is defined via grid-template-columns/rows. When content exceeds the defined range, Grid automatically creates implicit tracks. Use grid-auto-rows/columns to control implicit track sizes.
Q: How to make an element span multiple rows or columns?
A: Use grid-column: span 2 (span 2 columns) or grid-row: 1 / 3 (from row 1 to row 3). You can also use grid-area to specify start/end positions: grid-area: 1 / 1 / 3 / 4 (row-start / col-start / row-end / col-end).