- 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 grid - grid-auto-rows
The CSS property grid-auto-rows defines the dimensions for a grid row track or a set of tracks that are implicitly created.
When a grid item is placed in a row with no specified size via grid-template-rows, the grid system creates implicit grid lanes to accommodate it. This happens when an item is placed in a row outside the defined area or when the automatic placement process creates additional rows.
Possible values
<length> - Is a non-negative length.
<percentage> - Is a <percentage> value that is non-negative in relation to the grid container's block size. The percentage value is set as auto if the grid container's block size is indefinite.
<flex> - This value is a non-negative dimension with the unit fr, which indicates the flex factor of the track. Each track that has a certain size takes up a portion of the remaining space based on its flex factor.
max-content - It's a keyword that specifies the maximum content contribution of the grid elements that occupy the grid track.
min-content - It's a keyword that specifies the largest minimum content contribution of the grid elements within the grid track.
- minmax(min, max) - This function defines a size range, from min to max values. If the maximum value is smaller than the minimum value, the maximum value isn't taken into account and the function only uses the minimum value.
fit-content( [ <length> | <percentage> ] ) - Represents the expression min(max-content, max(auto, argument)), which is calculated similarly to auto (i.e. minmax(auto, max-content)), but the track size is limited to the argument if it exceeds the auto minimum.
auto - The maximum and minimum values in a track indicate the maximum and minimum content sizes (specified by min-width/min-height), respectively, and auto covers the range between them when used alone outside minmax() notation.
Syntax
grid-auto-columns = <track-size>+ <track-size> = <track-breadth> minmax(<inflexible-breadth> , <track-breadth>) | fit-content(<length-percentage [0,∞]>)
Applies to
Grid containers.
CSS grid-auto-rows - <length> Value
The following example demonstrates the usage of grid-auto-rows using length.
<html> <head> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .grid-container { display: grid; grid-auto-rows: 50px; /* Change this value to see the effect */ gap: 15px; padding: 20px; background-color: #d7dade; } .item { background-color: #054ab0; color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; } </style> </head> <body> <div class="grid-container"> <div class="item">Box 1</div> <div class="item">Box 2</div> <div class="item">Box 3</div> <div class="item">Box 4</div> <div class="item">Box 5</div> <div class="item">Box 6</div> </div> </body> </html>
CSS grid-auto-rows - <percentage> Value
In the following example, the CSS grid-auto-rows: 45%; defines the height of implicitly created rows in the grid, ensuring that each additional row beyond the explicitly defined ones takes up 45% of the available height.
<html> <head> <style> .custom-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 45%; gap: 20px; padding: 30px; background-color: seagreen; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); margin: 50px; } .custom-item { background-color: #db3c3c; color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 8px; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="custom-grid-container"> <div class="custom-item">Grid Element A</div> <div class="custom-item">Grid Element B</div> <div class="custom-item">Grid Element C</div> <div class="custom-item">Grid Element D</div> <div class="custom-item">Grid Element E</div> <div class="custom-item">Grid Element F</div> </div> </body> </html>
CSS grid-auto-rows - <flex> Value
The following example demonstrates the usage of grid-auto-rows using flex i.e fr.
<html> <head> <style> .unique-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr 2fr; gap: 20px; padding: 20px; background-color: #5E9CA0; border-radius: 12px; box-shadow: 0 0 18px rgba(0, 0, 0, 0.2); margin: 50px; } .unique-item { background-color: #FFD700; color: #333; display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 10px; padding: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="unique-grid-container"> <div class="unique-item">Special Box X</div> <div class="unique-item">Special Box Y</div> <div class="unique-item">Special Box Z</div> <div class="unique-item">Special Box W</div> <div class="unique-item">Special Box V</div> <div class="unique-item">Special Box U</div> </div> </body> </html>
CSS grid-auto-rows - max-content Value
The following example demonstrates the usage of grid-auto-rows using max-content.
<html> <head> <style> .customized-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: max-content; gap: 25px; padding: 15px; background-color: #c90e27; border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); margin: 40px; } .customized-item { background-color: #FFA07A; color: #333; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 8px; padding: 15px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="customized-grid-container"> <div class="customized-item">Special BLOCK A with Larger- Content</div> <div class="customized-item">BLOCK B</div> <div class="customized-item">BLOCK C</div> <div class="customized-item">Special BLOCK D with Longer Content</div> <div class="customized-item">BLOCK E</div> <div class="customized-item">BLOCK F</div> </div> </body> </html>
CSS grid-auto-rows - min-content Value
The following example demonstrates the usage of grid-auto-rows using min-content.
<html> <head> <style> .customized-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; gap: 25px; padding: 15px; background-color: #f0582e; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); margin: 40px; } .customized-item { background-color: #e0b4ba; color: #333; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 10px; padding: 10px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="customized-grid-container"> <div class="customized-item">Block A</div> <div class="customized-item">Block B</div> <div class="customized-item">Block C</div> <div class="customized-item">Block D</div> <div class="customized-item">Block E</div> <div class="customized-item">Block F</div> </div> </body> </html>
CSS grid-auto-rows - fit-content Value
The following example demonstrates the usage of grid-auto-rows using fit-content.
<html> <head> <style> .customized-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: fit-content(100px); gap: 25px; padding: 15px; background-color: #6495ED; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); margin: 40px; } .customized-item { background-color: #FFD700; color: #333; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 12px; padding: 15px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="customized-grid-container"> <div class="customized-item">Flexible Block A</div> <div class="customized-item">Flexible Block B</div> <div class="customized-item">Flexible Block C</div> <div class="customized-item">Flexible Block D with Longer Content</div> <div class="customized-item">Flexible Block E with Longer Content</div> <div class="customized-item">Flexible Block F with Longer Content</div> </div> </body> </html>
CSS grid-auto-rows - minmax(min, max) Value
The following example demonstrates the usage of grid-auto-rows using minmax(min, max).
<html> <head> <style> .customized-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(80px, 1fr); gap: 25px; padding: 15px; background-color: #FF6347; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); margin: 40px; } .customized-item { background-color: #87CEEB; color: #333; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 12px; padding: 15px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="customized-grid-container"> <div class="customized-item">Resizable Block A</div> <div class="customized-item">Resizable Block B</div> <div class="customized-item">Resizable Block C</div> <div class="customized-item">Resizable Block D with Longer Content</div> <div class="customized-item">Resizable Block E with Longer Content</div> <div class="customized-item">Resizable Block F with Longer Content</div> </div> </body> </html>
CSS grid-auto-rows - auto Value
In the following example the CSS grid-auto-rows: auto; indicates that the height of the implicitly formed rows in the grid will depend on the intrinsic size of the content, thus every row will dynamically resize to fit the content inside the custom grid container.
<html> <head> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .custom-grid-container { display: grid; grid-auto-rows: auto; gap: 20px; padding: 30px; background-color: #6a6a6a; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); margin: 50px; } .custom-item { background-color: #db3c3c; color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 8px; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="custom-grid-container"> <div class="custom-item">BOX 1</div> <div class="custom-item">BOX 2</div> <div class="custom-item">BOX 3</div> <div class="custom-item">BOX 4</div> <div class="custom-item">BOX 5</div> <div class="custom-item">BOX 6</div> </div> </body> </html>