- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Function- fit-content()
The CSS function fit-content() uses the formula min(maximum size, max(minimum size, argument)) to restrict a given size inside a range determined by a minimum and maximum size.
In CSS Grid, the fit-content() function may be used as a track size.
In this case, it uses auto to determine the minimum size and max-content to establish the maximum size, which is computed similarly to minmax(auto, max-content).
The fit-content() function acts as a box size specifier for width, height, min-width, min-height, max-width, and max-height.
The maximum and minimum sizes in this usage are determined by the size of the content.
Possible Values
The parameters <length> and <percentage> can be passed to the fit-content() function.
<length> - An absolute length.
<percentage> - On a given axis, the percentage is computed with respect to the available space.
It is related to the block size for row tracks and the inline size for column tracks inside the grid container in the grid attributes.
Outside of grid parameters, it depends on the writing mode and the available inline or block size of the laid-out box.
Syntax
fit-content: length | percentage
CSS fit-content() - <length> Value
In the following example, the grid-template-columns are given the CSS property fit-content(), which enables the columns to resize according to the content, with maximum widths set for each column inside the #custom-container grid.
<html> <head> <style> #custom-container { display: grid; grid-template-columns: fit-content(200px) fit-content(400px) fit-content(200px); grid-gap: 10px; box-sizing: border-box; height: 250px; width: 80%; margin: 20px auto; background-color: #c43b31; padding: 20px; } #custom-container > div { background-color: #ffd700; padding: 15px; } </style> </head> <body> <div id="custom-container"> <div>Unique Item</div> <div>A longer description goes here. It might contain more details and interesting information that extends beyond the usual width.</div> <div>Adaptable Element</div> </div> </body> </html>
CSS fit-content() - <percentage> Value
In the following example the CSS property fit-content() is applied in the grid-template-columns of the #custom-container.
It specifies percentages for column widths, enabling the columns to dynamically resize according to a relative percentage of the container's width, with the final column (1.2fr) occupying the remaining space.
<html> <head> <style> #custom-container { display: grid; grid-template-columns: fit-content(20%) fit-content(30%) fit-content(40px) 1.2fr; grid-gap: 15px; box-sizing: border-box; height: 40%; width: 100%; background-color: #7b4a93; padding: 15px; } .custom-box { background-color: #ecf0f1; padding: 8px; } </style> </head> <body> <div id="custom-container"> <div class="custom-box"> Explore new ideas within width.</div> <div class="custom-box"> Dive into content-rich experiences up to 280px.</div> <div class="custom-box"> <b>Immerse in knowledge.</b> Learn about various topics from science to art.</div> <div class="custom-box"> Responsive to screen size and other divisions' width.</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google