Grid fr Free-Space Share Calculator
Definite-container initial fr allocation after fixed tracks/gaps, sumfr<1 partial filling retained; minimum-track intrinsic sizing/freeze algorithm excluded. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Fractional grid tracks share independently resolved remaining space.
Fractional grid tracks share independently resolved remaining space.1
Factors summing below one can leave space unallocated rather than consuming the entire container. Use Grid fr Free-Space Share Calculator to evaluate the supplied inputs under the specific model below.
When to use Grid fr Free-Space Share Calculator
Use Grid fr Free-Space Share Calculator to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use Grid fr Free-Space Share Calculator and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Definite container px, Non flexible track total px, Explicit gap total px, Flex track factors using the field table and validation rules below, then run the tool.
- Read Initial fr shares px, Unallocated free space px and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| definiteContainerPx | Definite container px | number | Required; constraints below |
| nonFlexibleTrackTotalPx | Non flexible track total px | number | Required; constraints below |
| explicitGapTotalPx | Explicit gap total px | number | Required; constraints below |
| flexTrackFactors | Flex track factors | array of number | Required; constraints below |
Enter nonnegative container, fixed-track and gap sizes in px and a nonempty array of nonnegative fr factors. Free space is max(0,container−fixed−gaps); divide each factor's share by max(1,sum of factors). Factors summing below 1 leave some free space unallocated; all-zero factors allocate none. Intrinsic track minima, max-content contributions and full Grid sizing are outside this simplified model.
free = max(0,container−fixed−gaps); allocation[i] = free×fr[i]/max(1,Σfr); unallocated = free−Σallocation Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| initialFrSharesPx | Initial fr shares px | array of number |
| unallocatedFreeSpacePx | Unallocated free space px | number |
{
"input": {
"definiteContainerPx": 100,
"nonFlexibleTrackTotalPx": 20,
"explicitGapTotalPx": 10,
"flexTrackFactors": [
1,
2
]
},
"output": {
"initialFrSharesPx": [
23.333333333333332,
46.666666666666664
],
"unallocatedFreeSpacePx": 0
}
}Limitations and assumptions
Fractional tracks share leftover space, and factors summing below one can leave some of it unallocated. Full Grid sizing additionally depends on intrinsic track constraints.2
Factors summing below one can leave space unallocated rather than consuming the entire container. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use object-position Focal Percent Placement for a related task: Object-position percentages distribute the difference between container and rendered-object dimensions.
Use aspect-ratio Property vs Padding-Hack Note for a related task: Aspect-ratio sizing and percentage-padding techniques can use different width bases.
References
-
Grid fr Free-Space Share Calculator — tool.io
-
CSS Grid Layout Level 2 — W3C
Similar or alternative tools
- object-position Focal Percent Placement
Object-position percentages distribute the difference between container and rendered-object dimensions.
- aspect-ratio Property vs Padding-Hack Note
Aspect-ratio sizing and percentage-padding techniques can use different width bases.