Description
Generate a definite-width grid preset with delegated fixed-track fit counts and initial fr shares, excluding intrinsic browser sizing.
An interface fixture makes content and state explicit so a consumer can test a rendering or interaction. Literal labels, modeled states, and calculated geometry remain separate from what a browser or assistive technology actually displays or announces.
Generate a definite-width grid preset with delegated fixed-track fit counts and initial fr shares, excluding intrinsic browser sizing.
When to use this tool
Use this generator to create reproducible css grid layout preset cases from the supplied model or bank. Inspect the returned evidence before using cases in a test or exercise.
How to use the tool and how it works
- Supply containerWidthPx, gapPx, minimumTrackPx, trackWeight in the field shapes below. Set seed when you need an explicit replay.
- Run the tool and correct any input error. For generated controls, distinguish a successful fixture containing an invalid case from failure to generate the fixture.
- Read containerWidthPx, gapPx, minimumTrackPx, fitCount, trackWeights, initialTrackSharesPx, unallocatedFreeSpacePx, oneTrackOverflows, css. Use the conventions below. Keep answer-bearing fields separate when presenting an exercise.
Draw container, gap, minimum-track width, and track weights. Delegate a fit count and initial fractional-track shares after gaps, then emit grid CSS using minmax with zero minima and the sampled fr weights.1
Delegated operations used for this result: grid repeat count from gap width; grid fr unit free space share. Their calculation or parsing conventions apply to the corresponding result fields.2, 3
| Input field | Meaning and units | Accepted input |
|---|---|---|
| containerWidthPx | Container Width Px | Required. Object; no unknown keys. |
| containerWidthPx.minimum | Minimum | Required. Safe integer; minimum 1. |
| containerWidthPx.maximum | Maximum | Required. Safe integer; minimum 1. |
| gapPx | Gap Px | Required. Object; no unknown keys. |
| gapPx.minimum | Minimum | Required. Safe integer; minimum 0. |
| gapPx.maximum | Maximum | Required. Safe integer; minimum 0. |
| minimumTrackPx | Minimum Track Px | Required. Object; no unknown keys. |
| minimumTrackPx.minimum | Minimum | Required. Safe integer; minimum 1. |
| minimumTrackPx.maximum | Maximum | Required. Safe integer; minimum 1. |
| trackWeight | Track Weight | Required. Object; no unknown keys. |
| trackWeight.minimum | Minimum | Required. Safe integer; minimum 1. |
| trackWeight.maximum | Maximum | Required. Safe integer; minimum 1. |
| seed | Optional numeric seed; takes precedence over context randomness. Without either, use the fixed tool.io default seed. | Optional. Safe integer. |
| Output field | Interpretation | Returned shape |
|---|---|---|
| containerWidthPx | Container Width Px | Required. Finite number. |
| gapPx | Gap Px | Required. Finite number. |
| minimumTrackPx | Minimum Track Px | Required. Finite number. |
| fitCount | Fit Count | Required. Safe integer; minimum 0; maximum 32. |
| trackWeights | Track Weights | Required. Array of Safe integer; minimum 1.; minimum items 1; maximum items 32. |
| initialTrackSharesPx | Initial Track Shares Px | Required. Array of Finite number.; minimum items 1; maximum items 32. |
| unallocatedFreeSpacePx | Unallocated Free Space Px | Required. Finite number. |
| oneTrackOverflows | One Track Overflows | Required. Boolean. |
| css | Css | Required. Text; maximum UTF-16 length 2048. |
| randomness | Replay source and normalized 32-bit seed, or null seed for an advancing context source. | Required. Object; no unknown keys. |
| randomness.seed | Optional safe-integer replay seed; normalization and precedence are explained below. | Required. Safe integer. or Null. |
| randomness.source | Source | Required. Text; one of "context", "seed". |
An explicit safe-integer seed takes precedence over injected context randomness and is normalized to an unsigned 32-bit integer. With no seed and no context source, replay uses the fixed tool.io default seed. A context source must return finite values from zero inclusive to one exclusive; its advancing state must be retained separately. randomness records the source and normalized seed, or null for context. These generators are not cryptographic random sources.
{
"input": {
"containerWidthPx": {
"minimum": 640,
"maximum": 640
},
"gapPx": {
"minimum": 20,
"maximum": 20
},
"minimumTrackPx": {
"minimum": 200,
"maximum": 200
},
"trackWeight": {
"minimum": 1,
"maximum": 3
},
"seed": 42
},
"output": {
"containerWidthPx": 640,
"gapPx": 20,
"minimumTrackPx": 200,
"fitCount": 3,
"trackWeights": [
3,
1,
2
],
"initialTrackSharesPx": [
300,
100,
200
],
"unallocatedFreeSpacePx": 0,
"oneTrackOverflows": false,
"css": "display: grid; width: 640px; gap: 20px; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr);",
"randomness": {
"seed": 42,
"source": "seed"
}
}
}Limitations and assumptions
- minimumTrackPx is used to choose count, not as the emitted CSS minimum. A mandatory single track can overflow and is flagged. Intrinsic sizing, content constraints, and full browser grid layout are not computed.
- A replay requires the same complete input and implementation. The stated sampling convention applies within its eligible space. A finite draw does not exhaust all possible outputs; repeats remain possible unless a distinct-selection rule is explicit.
- The field tables state structural bounds; cross-field constraints and bounded search or output budgets also apply. Unknown keys are rejected where the object contract disallows them. Input errors are distinct from null fields and deliberate invalid controls in a successful output.
Alternative or Complementary methods
For a supplied example, inspect the returned construction or delegated check directly. To evaluate a consumer, also test cases chosen for its own boundaries; a generated finite corpus does not establish exhaustive coverage.
References
Similar or alternative tools
- Random Dashboard Widget Layout Generator
Pack supplied rectangular widgets into a cell grid with randomized bounded backtracking and validated nonoverlap placements.
- Random Flex Layout Stress Case Generator
Generate flex bases and factors with delegated initial grow or shrink expectations before min-size freezing.