YouTipPr Grid Column
# CSS grid-column Property
The `grid-column` CSS property is a shorthand property that defines a grid item's size and location within a grid column by specifying its start and end positions. It allows you to control how many columns an item spans and exactly where it begins and ends along the inline axis.
---
## Quick Example
The following CSS rule positions `.item1` starting at grid column line 1 and ending before grid column line 5 (spanning 4 columns in total):
```css
.item1 {
grid-column: 1 / 5;
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `grid-column` property:
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **grid-column** | 57 | 16 | 52 | 10.1 | 44 |
---
## Property Definition and Usage
The `grid-column` property is a shorthand for the following two properties:
* `grid-column-start`
* `grid-column-end`
By defining the start and end lines, you can place grid items precisely. You can reference specific grid line numbers, or use the `span` keyword to specify how many columns the item should cross.
### Property Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value** | `auto / auto` |
| **Inherited** | No |
| **Animatable** | Yes (as discrete values or interpolatable lengths) |
| **CSS Version** | CSS Grid Layout Module Level 1 |
| **JavaScript Syntax** | `object.style.gridColumn = "2 / span 2"` |
---
## Syntax
```css
grid-column: grid-column-start / grid-column-end;
```
### Values
| Value | Description |
| :--- | :--- |
| `grid-column-start` | Specifies the grid line where the item begins. |
| `grid-column-end` | Specifies the grid line where the item ends, or how many columns it spans. |
*Note: The two values must be separated by a forward slash (`/`).*
---
## Code Examples
### Example 1: Spanning Columns from a Specific Start Line
In this example, `.item1` starts at column line 1 and spans across 3 columns:
```css
.item1 {
grid-column: 1 / span 3;
}
```
### Example 2: Starting at a Different Column Line
In this example, `.item2` starts at column line 2 and spans across 3 columns (ending at column line 5):
```css
.item2 {
grid-column: 2 / span 3;
}
```
### Example 3: Using Negative Grid Lines
You can also use negative numbers to reference grid lines starting from the end of the grid. For instance, to span from the first column to the very last column of the grid:
```css
.full-width-item {
grid-column: 1 / -1;
}
```
---
## Considerations & Best Practices
1. **Grid Lines vs. Grid Tracks:** Remember that grid lines are the boundaries separating the columns, not the columns themselves. A grid with 4 columns has 5 grid lines.
2. **Implicit vs. Explicit Grid:** If you position an item beyond the defined grid columns (e.g., placing an item at `grid-column: 6` when only 4 columns are defined), the browser will automatically create implicit columns to accommodate it.
3. **Overlapping Items:** Multiple grid items can share the same column space. You can control their stacking order using the `z-index` property.
4. **Shorthand Readability:** Always use a space before and after the forward slash (`/`) to keep your CSS clean and readable.