YouTipItem 1 (Col 1)
Item 2 (Col 2 - Implicit)
Item 3 (Col 3 - Implicit)
Pr Grid Auto Columns
## CSS grid-auto-columns Property
The `grid-auto-columns` property in CSS is used to set the default size for any implicitly-created grid columns in a grid container.
When grid items are positioned outside of the explicitly defined grid columns (for example, by using `grid-column` to place an item in a column that was not defined by `grid-template-columns`), the grid container automatically creates implicit columns to accommodate them. The `grid-auto-columns` property determines the size of these automatically generated columns.
---
## Quick Example
Set a default width of `50px` for any implicitly-created columns in the grid:
```css
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-columns: 50px;
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `grid-auto-columns` property:
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **grid-auto-columns** | 57 | 16 | 52 | 10 | 44 |
---
## Property Definition and Usage
* **Default Value:** `auto`
* **Inherited:** No
* **Animatable:** Yes (supports transitions and animations)
* **Specification Version:** CSS Grid Layout Module Level 1
* **JavaScript Syntax:** `object.style.gridAutoColumns = "120px"`
---
## Syntax
```css
grid-auto-columns: auto | max-content | min-content | minmax(min, max) | fit-content() | length | percentage;
```
### Property Values
| Value | Description |
| :--- | :--- |
| `auto` | **Default value.** The size of the columns is determined by the size of the container and the size of the content within the column items. |
| `fit-content(limit)` | Uses the formula `min(max-content, max(auto, limit))`, which behaves similarly to `auto` but clamps the size at the specified limit. |
| `max-content` | Sets the column width based on the largest grid item in the column. |
| `min-content` | Sets the column width based on the smallest grid item in the column. |
| `minmax(min, max)` | Defines a size range greater than or equal to `min` and less than or equal to `max`. |
| `length` | Sets the column size using a specific CSS length unit (e.g., `px`, `em`, `rem`, `vw`). |
| `%` | Sets the column size as a percentage of the grid container's width. |
---
## Code Examples and Practical Scenarios
### Example 1: Creating Implicit Columns
In this example, we explicitly define only one column using `grid-template-columns`. However, we position grid items into column 2 and column 3. The grid automatically creates these columns, and their widths are determined by `grid-auto-columns`.
```html
```
```css
.grid-container {
display: grid;
/* Only 1 explicit column of 100px */
grid-template-columns: 100px;
/* Any implicitly created columns will be 80px wide */
grid-auto-columns: 80px;
gap: 10px;
background-color: #f1f1f1;
padding: 10px;
}
.item1 {
grid-column: 1;
background-color: lightcoral;
}
.item2 {
grid-column: 2; /* Triggers implicit column creation */
background-color: lightblue;
}
.item3 {
grid-column: 3; /* Triggers implicit column creation */
background-color: lightgreen;
}
```
### Example 2: Using `minmax()` with `grid-auto-columns`
You can use the `minmax()` function to ensure implicit columns are flexible but stay within a specific range:
```css
.grid-container {
display: grid;
grid-template-columns: 200px;
/* Implicit columns will be at least 100px wide, but can grow up to 200px if space permits */
grid-auto-columns: minmax(100px, 200px);
}
```
---
## Key Considerations
1. **Difference between Explicit and Implicit Grids:**
* `grid-template-columns` defines the **explicit** grid columns that you plan for.
* `grid-auto-columns` defines the size of **implicit** columns created on-the-fly when content or positioning rules exceed the explicit grid boundaries.
2. **Interaction with `grid-auto-flow`:**
* By default, grid items flow row-by-row (`grid-auto-flow: row`).
* If you set `grid-auto-flow: column`, the grid will automatically append new columns to accommodate extra items. In this scenario, `grid-auto-columns` becomes highly useful as it dictates the size of all these automatically appended columns.
---
## Related Articles
* CSS Tutorial: (/css/css-grid.html)
* CSS Reference: (pr-grid-auto-row.html)