Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS grid-auto-columns property
The CSS grid-auto-columns property sets the default size for columns that are created implicitly in a grid container. This property is useful when grid items are placed outside the explicitly defined grid tracks.
Syntax
.container {
grid-auto-columns: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Fixed size using px, em, rem, etc. |
% |
Percentage of the container width |
fr |
Fractional unit for flexible sizing |
auto |
Size based on content (default) |
min-content |
Minimum size needed for content |
max-content |
Maximum size needed for content |
Example: Fixed Column Size
The following example demonstrates grid-auto-columns with a fixed 100px width −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-columns: 100px;
grid-auto-flow: column;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}
.container > div {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px 0;
font-size: 18px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Six green boxes numbered 1-6 are arranged horizontally in a single row, each with a fixed width of 100px and 10px gaps between them.
Example: Flexible Column Size
This example uses fractional units for flexible column sizing −
<!DOCTYPE html>
<html>
<head>
<style>
.flexible-container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
gap: 15px;
background-color: #e8f4f8;
padding: 20px;
width: 600px;
margin: 20px auto;
}
.flexible-container > div {
background-color: #2196F3;
color: white;
text-align: center;
padding: 25px 0;
font-size: 16px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="flexible-container">
<div>Item A</div>
<div>Item B</div>
<div>Item C</div>
<div>Item D</div>
</div>
</body>
</html>
Four blue boxes labeled "Item A" through "Item D" are arranged horizontally, each taking equal width (1fr) of the available container space with 15px gaps between them.
Conclusion
The grid-auto-columns property provides control over implicitly created columns in CSS Grid. Use it with grid-auto-flow: column to create responsive layouts where columns are automatically sized according to your specifications.
Updated on: 2026-03-15T13:29:42+05:30
109 Views
Advertisements