<flex>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
The <flex> CSS data type denotes a flexible length within a grid container. It is used in grid-template-columns, grid-template-rows and other related properties.
Syntax
The <flex> data type is specified as a <number> followed by the unit fr. The fr unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number.
Examples
>Examples of correct values for the fr data type
1fr /* Using an integer value */ 2.5fr /* Using a float value */
Example of use in a track listing for CSS grid layout
css
.grid {
display: grid;
grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}
Specifications
| Specification |
|---|
| CSS Grid Layout Module Level 2> # fr-unit> |