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
How to set a default column size in CSS Grid
The CSS grid-auto-columns property is used to set a default size for columns in a CSS Grid container. This property defines the size of implicitly created grid columns that are not explicitly defined with grid-template-columns.
Syntax
selector {
grid-auto-columns: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default value. Column size is determined by content |
length |
Fixed size in px, em, rem, etc. |
% |
Percentage of the container width |
fr |
Fractional unit representing a fraction of available space |
min-content |
Size based on the smallest content |
max-content |
Size based on the largest content |
Example
The following example demonstrates how to set a default column size of 100px using grid-auto-columns −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-columns: 100px;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
grid-auto-flow: column;
}
.container > div {
background-color: #E5E7E9;
text-align: center;
padding: 10px 0;
font-size: 20px;
color: #333;
}
</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>
A blue grid container with six gray grid items arranged in columns. Each column has a fixed width of 100px with 10px gaps between them. The items are numbered 1 through 6.
Conclusion
The grid-auto-columns property provides an efficient way to set consistent column sizes for implicitly created grid columns. It works best when combined with grid-auto-flow: column to create horizontal layouts with uniform column widths.
Updated on: 2026-03-15T13:15:09+05:30
559 Views
Advertisements