CSS fit-content() Function
Example
Use fit-content() to size the columns in the grid:
#container {
display: grid;
grid-template-columns:
fit-content(250px) fit-content(250px) auto;
grid-gap: 7px;
box-sizing: border-box;
height: 150px;
width: 100%;
background-color: green;
padding: 7px;
}
Try it Yourself »
Definition and Usage
The CSS fit-content() function allows you to
size an element based on its content. This works like the box/element will use
the available space, but it will never expand the maximum content size.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| fit-content() | 57 | 16 | 52 | 10.1 | 44 |
CSS Syntax
fit-content(length|percentage)
| Value | Description |
|---|---|
| length | Specifies an absolute length for the size |
| percentage | Specifies the size in percent relative to the available space |
Related Pages
CSS reference: CSS grid-auto-columns property.
CSS reference: CSS grid-auto-rows property.
CSS reference: CSS grid-template-columns property.
CSS reference: CSS grid-template-rows property.
