YouTipPr Grid Column End
# CSS grid-column-end Property
The `grid-column-end` CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This dictates how many columns an item spans, or which grid line it ends on.
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `grid-column-end` property.
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **grid-column-end** | 57 | 16 | 52 | 10 | 44 |
---
## Property Definition and Usage
The `grid-column-end` property defines how many columns a grid item will span, or which column line it will end on.
To position an item, you can pair it with `grid-column-start`. Alternatively, you can use the shorthand property `grid-column` to set both start and end values at once.
### Property Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value:** | `auto` |
| **Inherited:** | No |
| **Animatable:** | Yes (as discrete values or grid lengths) |
| **Specification:** | CSS Grid Layout Module Level 1 |
| **JavaScript Syntax:** | `object.style.gridColumnEnd = "3"` |
---
## Syntax
```css
grid-column-end: auto | span n | column-line;
```
### Property Values
| Value | Description |
| :--- | :--- |
| `auto` | **Default**. The item will span one column by default, or automatically determine its end position based on other placement properties. |
| `span n` | Specifies that the grid item will span the specified number (`n`) of columns from its starting position. |
| `column-line` | Specifies a number or name to identify the column line where the grid item ends. |
---
## Code Examples
### Example 1: Spanning Multiple Columns using `span`
In this example, we set `.item1` to span across 3 columns from its starting position.
```css
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.item1 {
grid-column-start: 1;
grid-column-end: span 3; /* Spans 3 columns, ending at line 4 */
background-color: #1abc9c;
}
```
### Example 2: Ending at a Specific Column Line
In this example, we explicitly set the grid item to end at column line 3.
```css
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3; /* Ends precisely at column line 3 */
background-color: #3498db;
}
```
### Example 3: Using Negative Line Numbers
You can use negative numbers to reference grid lines starting from the end of the grid. `-1` represents the very last column line of the grid.
```css
.item1 {
grid-column-start: 2;
grid-column-end: -1; /* Ends at the very last column line of the grid */
}
```
---
## Technical Considerations & Tips
1. **Named Grid Lines**: If you have named your grid lines in `grid-template-columns` (e.g., `grid-template-columns: 1fr 1fr `), you can use those names as values:
```css
grid-column-end: last;
```
2. **Implicit vs. Explicit Grid**: If you specify a `grid-column-end` line number that exceeds the number of defined columns, the CSS Grid layout engine will automatically create implicit columns to accommodate the item.
3. **Shorthand Alternative**: Instead of writing `grid-column-start` and `grid-column-end` separately, you can use the `grid-column` shorthand:
```css
/* grid-column: start / end; */
grid-column: 1 / span 3;
```
---
## Related Articles
* CSS Tutorial: (https://www.youtip.co/css/css-grid.html)
* CSS Reference: (pr-grid-column.html)
* CSS Reference: (pr-grid-column-start.html)
* CSS Reference: (pr-grid-row-start.html)
* CSS Reference: (pr-grid-row-end.html)