
- CSS - Home
- CSS - Roadmap
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Types
- CSS - Measurement Units
- CSS - Selectors
- 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 - Cascading
- CSS - Universal Selectors
- CSS - ID Selectors
- CSS - Group Selectors
- CSS - Class Selectors
- CSS - Child Selectors
- CSS - Element Selectors
- CSS - Descendant Selectors
- CSS - General Sibling Selectors
- CSS - Adjacent Sibling Selectors
- 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 Advanced Features
- 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 Interview Questions
- CSS Online Quiz
- CSS Online Test
- CSS Mock Test
- CSS - Quick Guide
- CSS - Cheatsheet
- CSS - Properties References
- CSS - Functions 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-auto-columns Property
CSS grid-auto-columns property defines the width of grid columns that are created implicitly. If a grid item is placed in a column that isn't explicitly dimensioned by grid-template-columns, the grid system creates implicit grid columns to accommodate it. The property has no effect if grid-template-columns is used.
Syntax
grid-auto-columns: auto | length | percentage | max-content | min-content | minmax(min,max) | fit-content();
Property Values
Value | Description |
---|---|
auto | The size of the columns depends on the size of the container. Default. |
length | The size of the column is set using length units. |
percentage | The size of the column is set using percentage values. |
max-content | The size of the column depends on the length of the content. Wrapping do not occur. |
min-content | The size of the column depends on the length of the content. Wrapping occurs. |
minmax(min, max) | It specifies the minimum default column size and the maximum attainable column size. |
fit-content() | It specifies a size within which the content is to be shown. Wrapping can occur. |
Examples of CSS Grid Auto Columns Property
The following examples explain the grid-auto-columns property with different values.
Grid Auto Columns Property with Auto Value
To allow the grid item to size itself based on its content and the available space in the grid container, we use the auto value. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .grid-container { background-color: lightgray; padding: 10px; display: grid; grid-auto-columns: auto; gap: 10px; } .grid-item { background-color: #336699; border: 3px solid blue; padding: 10px; text-align: center; color: white; } .item1 { grid-area: 1 / 1 / 2 / 2; } .item2 { grid-area: 1 / 2 / 2 / 3; } .item3 { grid-area: 1 / 3 / 2 / 4; } .item4 { grid-area: 2 / 1 / 3 / 2; } .item5 { grid-area: 2 / 2 / 3 / 3; } </style> </head> <body> <h2> CSS grid-auto-columns property </h2> <h4> grid-auto-columns: auto </h4> <div class="grid-container"> <div class="grid-item item1"> Item-1 </div> <div class="grid-item item2"> Item-2 </div> <div class="grid-item item3"> Item-3 </div> <div class="grid-item item4"> Item-4 </div> <div class="grid-item item5"> Item-5 </div> </div> </body> </html>
Grid Auto Columns Property with Length Values
To set the size of implicit columns, we can specify the size in length units (e.g. 10px, 20em etc.). All the implicitely created columns will thus be having the specified size. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .grid-container { background-color: lightgray; padding: 10px; display: grid; grid-auto-columns: 140px; gap: 10px; } .grid-item { background-color: #336699; border: 3px solid blue; padding: 10px; text-align: center; color: white; } .item1 { grid-area: 1 / 1 / 2 / 2; } .item2 { grid-area: 1 / 2 / 2 / 3; } .item3 { grid-area: 1 / 3 / 2 / 4; } .item4 { grid-area: 2 / 1 / 3 / 2; } .item5 { grid-area: 2 / 2 / 3 / 3; } </style> </head> <body> <h2> CSS grid-auto-columns property </h2> <h4> grid-auto-columns: 140px (each column is 140px) </h4> <div class="grid-container"> <div class="grid-item item1"> Item-1 </div> <div class="grid-item item2"> Item-2 </div> <div class="grid-item item3"> Item-3 </div> <div class="grid-item item4"> Item-4 </div> <div class="grid-item item5"> Item-5 </div> </div> </body> </html>
Grid Auto Columns Property with Percentage Values
To set the size of implicit columns, we can specify the size in percentage values (e.g. 10%, 20% etc.) which assign size as percent of the size of the container. All the implicitely created columns will thus be having the specified size. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .grid-container { background-color: lightgray; padding: 10px; display: grid; grid-auto-columns: 23%; gap: 10px; } .grid-item { background-color: #336699; border: 3px solid blue; padding: 10px; text-align: center; color: white; } .item1 { grid-area: 1 / 1 / 2 / 2; } .item2 { grid-area: 1 / 2 / 2 / 3; } .item3 { grid-area: 1 / 3 / 2 / 4; } .item4 { grid-area: 2 / 1 / 3 / 2; } .item5 { grid-area: 2 / 2 / 3 / 3; } </style> </head> <body> <h2> CSS grid-auto-columns property </h2> <h4> grid-auto-columns: 15% (each column is 15% of the width of the container) </h4> <div class="grid-container"> <div class="grid-item item1"> Item-1 </div> <div class="grid-item item2"> Item-2 </div> <div class="grid-item item3"> Item-3 </div> <div class="grid-item item4"> Item-4 </div> <div class="grid-item item5"> Item-5 </div> </div> </body> </html>
Grid Auto Columns Property with Max Content Value
To make the implicitly created columns as wide as the largest piece of content within the columns, we use the max-content value. Each column will expand to fit its content without wrapping or clipping, making the columns as wide as the largest content item. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .grid-container { background-color: lightgray; padding: 10px; display: grid; grid-auto-columns: max-content; gap: 10px; } .grid-item { background-color: #336699; border: 3px solid blue; padding: 10px; text-align: center; color: white; } .item1 { grid-area: 1 / 1 / 2 / 2; } .item2 { grid-area: 1 / 2 / 2 / 3; } .item3 { grid-area: 1 / 3 / 2 / 4; } .item4 { grid-area: 2 / 1 / 3 / 2; } .item5 { grid-area: 2 / 2 / 3 / 3; } </style> </head> <body> <h2> CSS grid-auto-columns property </h2> <h4> grid-auto-columns: max-content (the items are sized such that they accomodate all the content without overflow or wrapping) </h4> <div class="grid-container"> <div class="grid-item item1"> This is first Item1 </div> <div class="grid-item item2"> Second Item </div> <div class="grid-item item3"> 3rd </div> <div class="grid-item item4"> fourth </div> <div class="grid-item item5"> 5th </div> </div> </body> </html>
Grid Auto Columns Property with Min Content Value
To make the implicitly created columns as narrow as the smallest piece of content within them, while still ensuring that all content is fully visible, we use the min-content value. This allows the columns to shrink to fit the smallest content size causing wrapping. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .grid-container { background-color: lightgray; padding: 10px; display: grid; grid-auto-columns: min-content; gap: 10px; } .grid-item { background-color: #336699; border: 3px solid blue; padding: 10px; text-align: center; color: white; } .item1 { grid-area: 1 / 1 / 2 / 2; } .item2 { grid-area: 1 / 2 / 2 / 3; } .item3 { grid-area: 1 / 3 / 2 / 4; } .item4 { grid-area: 2 / 1 / 3 / 2; } .item5 { grid-area: 2 / 2 / 3 / 3; } </style> </head> <body> <h2> CSS grid-auto-columns property </h2> <h4> grid-auto-columns: min-content (the items are sized such that they accomodate all the content with overflow or wrapping) </h4> <div class="grid-container"> <div class="grid-item item1"> This is first Item1 </div> <div class="grid-item item2"> Second Item </div> <div class="grid-item item3"> 3rd </div> <div class="grid-item item4"> fourth </div> <div class="grid-item item5"> 5th </div> </div> </body> </html>
Grid Auto Columns Property with MinMax Function
To define a size range for the grid items, we use the minmax() function to specify the default minimum size of the item and the maximum attainable size of the item (e.g. minmax(50px,100px) indicates the initial size is 50px but the element can grow upto 100px). This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .grid-container { background-color: lightgray; padding: 10px; display: grid; grid-auto-columns: minmax(100px, 150px); gap: 10px; } .grid-item { background-color: #336699; border: 3px solid blue; padding: 10px; text-align: center; color: white; } .item1 { grid-area: 1 / 1 / 2 / 2; } .item2 { grid-area: 1 / 2 / 2 / 3; } .item3 { grid-area: 1 / 3 / 2 / 4; } .item4 { grid-area: 2 / 1 / 3 / 2; } .item5 { grid-area: 2 / 2 / 3 / 3; } </style> </head> <body> <h2> CSS grid-auto-columns property </h2> <h4> grid-auto-columns: minmax(100px, 150px) (the items will have an initial size of 100px but cant grow upto 150px depending on the content.) </h4> <div class="grid-container"> <div class="grid-item item1"> This is the first Item1. </div> <div class="grid-item item2"> This is Second Item. </div> <div class="grid-item item3"> 3rd </div> <div class="grid-item item4"> fourth </div> <div class="grid-item item5"> 5th </div> </div> </body> </html>
Grid Auto Columns Property with Fit Content Function
To assign sizes to implicitly created columns based on their content not exceeding a specified maximum value, we use the fit-content() function. An element can at maximum have the size specified to the function, if the content is longer than the specified size then wrapping occurs. This is shown in the following example.
Example
<!DOCTYPE html> <html> <head> <style> .grid-container { background-color: lightgray; padding: 10px; display: grid; grid-auto-columns: fit-content(120px); gap: 10px; } .grid-item { background-color: #336699; border: 3px solid blue; padding: 10px; text-align: center; color: white; } .item1 { grid-area: 1 / 1 / 2 / 2; } .item2 { grid-area: 1 / 2 / 2 / 3; } .item3 { grid-area: 1 / 3 / 2 / 4; } .item4 { grid-area: 2 / 1 / 3 / 2; } .item5 { grid-area: 2 / 2 / 3 / 3; } </style> </head> <body> <h2> CSS grid-auto-columns property </h2> <h4> grid-auto-columns: fit-content(120px) (the items will have a max width of 120px and will not exceed this value but ensure the content is completely displayed.) </h4> <div class="grid-container"> <div class="grid-item item1"> This is the first Item1. </div> <div class="grid-item item2"> This is Second Item. </div> <div class="grid-item item3"> 3rd </div> <div class="grid-item item4"> fourth </div> <div class="grid-item item5"> 5th </div> </div> </body> </html>
Supported Browsers
Property | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
grid-auto-columns | 57 | 16 | 52 | 10 | 44 |