▦ Grid Templates
Define the rows and columns of your grid.
The gridTemplateColumns and gridTemplateRows properties define the line names and track sizing functions of the grid.
Track Sizing
Each track is defined using a min and max sizing function:
| Value | Description | Example (JS) |
|---|---|---|
| Points | Fixed size in pixels. | { min: 100, max: 100 } |
| Percent | Percentage of container size. | { min: 0, max: '50%' } |
| Flex (fr) | Share of remaining space (Fractional unit). | { min: 0, max: '1fr' } |
| Auto | Size based on content and available space. | { min: 'auto', max: 'auto' } |
| MinContent | Smallest possible size that fits content. | { min: 'min-content', max: 'auto' } |
| MaxContent | Largest possible size that fits content. | { min: 'auto', max: 'max-content' } |
Example
Loading Preview…