CSS grid-column-start Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The grid-column-start property determines the grid column line that an item’s left (or inline start) edge aligns to inside a grid container. In effect, it selects which vertical grid line the item will begin at on the grid’s column axis. When a specific start line is established, that line becomes the reference for the item’s horizontal placement; the opposite edge of the item is then governed by whatever end placement is set (explicitly or implicitly), which in combination defines how many column tracks the item occupies and where it sits in the overall grid.

Because placement is a relationship between two edges, grid-column-start is most often used together with grid-column-end (or with the shorthand grid-column) to create a defined span across grid tracks. If the end edge is omitted or left to automatic placement, the start line still anchors the item and the grid algorithm will resolve the other edge during layout. Named grid lines and explicit track definitions can be referenced so the start line can be tied to semantic structure rather than only numeric indices; those line names ultimately derive from how the container defines its columns, for example with grid-template-columns, and that definition controls where candidate start lines exist.

The property also interacts with the grid auto-placement algorithm and implicit grid creation. If multiple items compete for the same start line during auto-placement, the grid resolves placement according to the container’s auto-placement rules; if the specified start line lies outside the currently defined explicit grid, the grid may create implicit tracks to satisfy the placement, which affects the container’s final size and flow. Finally, writing mode and directionality of the document influence which edge is considered the “start” for inline placement, so the visual effect of a given start line value can change in vertical writing modes or right-to-left contexts.

Definition

Initial value: auto
Applies to: Grid items and absolutely-positioned boxes whose containing block is a grid container
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.gridColumnStart

Interactive Demo

grid-column-start: auto;

grid-column-start: 2;

grid-column-start: -1;

grid-column-start: span 2;

One

Two

Three

Syntax

grid-column-start: auto | line | line-name | span line

Values

autoA keyword indicating that the property does not affect the placement of the element in the grid layout (automatic placement, automatic range, or default range of 1). This is the default value.
lineAn integer that corresponds to the initial face of the element in the grid layout (counting the faces is left to right from the left edge of the element, a schematic display at the top of the page). If a negative integer is specified, then the count is in the reverse order, starting from the end edge of the explicit layout grid. A value of 0 is not valid.
line-nameA string value that refers to a named column in a grid layout. The element is located from the initial face of the specified element.
span lineThe span keyword with an integer that determines how many columns the grid element will span. If an integer is omitted, the default value is 1. A negative value or a value of 0 is not valid.

Example

HTML

<div class='grid'>

    <div class='item item1'>1</div>

    <div class='item item2'>2</div>

    <div class='item item3'>3</div>

    <div class='item item4'>4</div>

    <div class='item item5'>5</div>

</div>

CSS

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 100px;
    gap: 12px;
    width: 720px;
    margin: 24px;
}

.item {
    background: #4a90e2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 8px;
}

/* Examples of grid-column-start */
.item1 {
    /* starts at the second column line */
    grid-column-start: 2;
}

.item2 {
    /* starts at the fourth column line */
    grid-column-start: 4;
}

.item3 {
    /* starts at the first column line and spans two columns */
    grid-column-start: 1;
    grid-column-end: span 2;
}

.item4 {
    /* starts at the last column line using a negative index */
    grid-column-start: -1;
}

.item5 {
    /* explicitly start at column line 3 */
    grid-column-start: 3;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS grid-column-start property. Hover over a browser icon to see the version that first introduced support for this CSS property.