Quick Start

  1. Open the "CSS Grid (网格布局)" tool on HeronTool, and you'll see a canvas and a property panel on the right.
  2. Set the number of columns, rows, gap, and alignment in the panel; the canvas previews in real time.
  3. 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 footer in the code box, and the tool generates corresponding grid-template-areas code, 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.

Thẻ
# Lưới# CSS# Tạo# Thiết kế