CSS fit-content() Function

Definition and Usage

CSS fit-content() The function allows the size of the element to be adjusted according to the content. This method is similar to the element using the available space, but it will never exceed the maximum content size.

Example

Using fit-content() Adjust the size of 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

CSS Syntax

fit-content(length|percentage)
Value Description
length Specify the absolute length value of the size.
percentage Specify the percentage size relative to the available space.

Technical Details

Version: CSS4

Browser Support

The numbers in the table indicate the browser version that first fully supports this function.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Σχετικές σελίδες

Αναφορά:CSS grid-auto-columns ιδιότητα

Αναφορά:CSS grid-auto-rows ιδιότητα

Αναφορά:CSS grid-template-columns ιδιότητα

Αναφορά:CSS grid-template-rows ιδιότητα