Blueprint Engine v2
CSS Grid Architect
A professional-grade constructor for complex 2D spatial layouts. Design responsive matrices with architectural precision.
Matrix Params
4
4
16px
1
2
3
4
Active Matrix
4 ModulesSyntax Tree
1.grid-container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr);
4 grid-template-rows: repeat(4, 1fr);
5 gap: 16px;
6}
7
8.item-1 {
9 grid-column: span 2;
10 grid-row: span 2;
11}
12.item-2 {
13 grid-column: span 2;
14}
15.item-4 {
16 grid-row: span 2;
17}
18
Spatial Data
MODULE 1
2x2 SpanCol Span
Row Span
MODULE 2
2x1 SpanCol Span
Row Span
MODULE 3
1x1 SpanCol Span
Row Span
MODULE 4
1x2 SpanCol Span
Row Span
Two-D Precision
Control both axes simultaneously. Axonix Grid Architect handles complex spatial relationships that Flexbox can't reach.
Spanning Logic
Create Bento-grids, magazine layouts, and complex dashboards by spanning items across multiple tracks with ease.
Clean Syntax
Every line of CSS is optimized for size and performance. We use the most modern shorthand Grid syntax available today.
How to Use Mastering CSS Grid Architect
- 1Adjust the 'Columns' and 'Rows' sliders to define your base grid matrix.
- 2Set the 'Gap' to control spacing between your layout modules.
- 3Click 'Generate Item' to add new modules to the blueprint.
- 4Individual module spans can be adjusted in the 'Spatial Data' panel.
- 5Copy the generated 'Syntax Tree' to use the layout in your own web project.
Key Features
- Dynamic Matrix Engine: Real-time 2D grid generation with fractional units.
- Bento Preset Library: Quick-load popular modern UI layouts like Bento and Hero sections.
- Live Blueprint Preview: Visual guidelines that help you understand track alignments.
- Shorthand CSS Output: Clean, copy-paste ready code using `grid-template` properties.
- Interactive Spanning: Test how items wrap and stretch across rows and columns.