Quick Start
- Open the "CSS Grid (网格布局)" tool on HeronTool, and you'll see a canvas and a property panel on the right.
- Set the number of columns, rows, gap, and alignment in the panel; the canvas previews in real time.
- Adjust column widths (e.g.,
1fr 2fr) or use fixed pixel values to observe how the grid responds.
Practical Tips
- Use the "Template Areas" feature: type named areas like
header main footerin the code box, and the tool generates correspondinggrid-template-areascode, visualizing region boundaries. - Switch to "Responsive Mode" to test layouts at different screen sizes and confirm breakpoint settings.
- One-click copy the generated CSS and paste directly into your project—no manual calculation needed.
Preview & Debug
- Click on grid lines in the canvas to highlight corresponding tracks and verify dimensions.
- Use the "Overflow Check" button to spot content overflow issues and adjust
minmax()values. - Save snapshots for complex layouts to compare different configurations.
FAQ
Q: Generated code doesn't match expectations?
A: Try resetting the property panel and adjust step by step, avoiding conflicting shorthand properties like grid-template.
Q: How to center content?
A: Set place-items: center, or use the "Center" shortcut button in the panel.
Q: Can I export to other formats?
A: Currently CSS and Sass are supported; SCSS export will be added soon.
Теги
