CSS grid-column-start Property
Learn how the CSS grid-column-start property pins a grid item to a column line. Covers syntax, auto, span, named lines, and live examples.
The grid-column-start CSS property sets the column line where a grid item begins — its inline-start edge. Together with grid-column-end it determines how many columns the item occupies and where it sits. The two are commonly written with the grid-column shorthand: grid-column: <start> / <end>.
Use grid-column-start when you need explicit placement inside a CSS Grid layout — for example, to make a hero banner span from the second column onwards, or to push a sidebar to a specific track regardless of source order.
How grid lines are numbered: in a grid with four columns there are five vertical lines, numbered 1 to 5 from the inline-start edge. You can also use negative numbers: -1 refers to the last line, -2 the second-to-last, and so on.
| Initial Value | auto |
| Applies to | Grid items |
| Inherited | No |
| Animatable | Yes — the starting line is animatable |
| Version | CSS Grid Layout Module Level 1 |
| DOM Syntax | object.style.gridColumnStart = "2" |
Syntax
grid-column-start: auto | <integer> | <name> | span <n> | initial | inherit;auto— the browser places the item using auto-placement (default).<integer>— a grid-line number, e.g.2or-1.<name>— a named line defined ingrid-template-columns.span <n>— the item spansncolumn tracks from wherever it is placed.
Values
| Value | Description |
|---|---|
auto | Default. The item follows normal auto-placement and spans one column. |
<integer> | A positive or negative line number. Negative values count from the end of the explicit grid. |
<name> | The name of a grid line, e.g. main-start when defined via [main-start] in grid-template-columns. |
span <n> | Span n column tracks. Unlike a line number, this does not pin the item's start position. |
initial | Resets the property to its initial value (auto). |
inherit | Inherits the value from the parent element. |
Examples
Placing an item on a specific line
Setting grid-column-start: 2 places the first item so its left edge aligns with the second vertical grid line, pushing it into the second column slot.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box1 {
grid-column-start: 6;
}
</style>
</head>
<body>
<h2>grid-column-start: 6 — implicit column created</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Because the template only defines four columns (lines 1–5), asking box1 to start at line 6 forces the browser to create implicit columns (lines 5 and 6) to accommodate it. This is a common gotcha — always check that your line number stays within the explicit grid unless you intentionally want implicit tracks.
![Grid-column-start property](/uploads/media/default/0001/03/52b22b9f4f2b6f8f1d65a6fb309fe3ee15e77b77.png "Grid-column-start property" =420x)
Spanning columns with span
Using span 2 tells the item to occupy two column tracks from wherever auto-placement puts it. Unlike a line number, span is relative — the item's exact start position is still decided by auto-placement.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.span-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #888;
padding: 10px;
margin-top: 20px;
}
.span-container > div {
background-color: #fff;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.span-box1 {
grid-column-start: span 2;
}
</style>
</head>
<body>
<h2>grid-column-start: span 2</h2>
<div class="span-container">
<div class="span-box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>This is the most readable form when you care about an item's width in columns but not its exact position. To both pin the position and control the width, combine grid-column-start with grid-column-end, or use the grid-column shorthand.
Default auto-placement
When set to auto (the default), the item slots into the next available cell as determined by the grid auto-flow algorithm. Items fill the grid row by row.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box1 {
grid-column-start: auto;
}
</style>
</head>
<body>
<h2>grid-column-start: auto (default)</h2>
<div class="grid-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
</div>
</body>
</html>Pinning to column 4
grid-column-start: 4 anchors the first item's left edge to the fourth vertical line. The remaining items fill the earlier columns through auto-placement.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 12px;
background-color: red;
padding: 15px;
}
.grid-container > div {
background-color: #dcdcdc;
text-align: center;
padding: 20px 0;
font-size: 35px;
color: white;
}
.box1 {
grid-column-start: 4;
}
</style>
</head>
<body>
<h2>grid-column-start: 4</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>Common patterns and gotchas
Combining start and end for exact placement
For full control over placement, pair grid-column-start with grid-column-end. The grid-column shorthand is the most concise way to do this:
/* Place item from column line 2 to column line 4 (spans 2 tracks) */
.item {
grid-column: 2 / 4;
/* equivalent to: */
/* grid-column-start: 2; */
/* grid-column-end: 4; */
}Using negative line numbers
Negative integers count from the end of the explicit grid. -1 is the last line of the explicit grid, making it easy to stretch an item to the far edge without knowing how many columns there are:
/* Full-width banner across all explicit columns */
.banner {
grid-column-start: 1;
grid-column-end: -1;
}This is equivalent to grid-column: 1 / -1. Note that negative numbers only address lines in the explicit grid (defined by grid-template-columns); they do not reach implicit columns created by overflow.
Named lines
When you define named lines in grid-template-columns, you can reference them by name instead of number. This makes layouts self-documenting:
.container {
display: grid;
grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}
.sidebar {
grid-column-start: sidebar-start; /* or just: grid-column-start: 1 */
}
.main {
grid-column-start: content-start; /* or: grid-column-start: 2 */
}Named lines are especially useful in large or reusable layout components where column numbers may change.
The item vs. auto-placement interaction
When grid-column-start is set to an explicit line, auto-placement for subsequent items resumes from the next available cell after the explicitly placed item. This can leave gaps if there are no items to fill them — use grid-auto-flow: dense to backfill gaps automatically.
Related properties
grid-column-end— sets the line where the item ends.grid-column— shorthand forgrid-column-startandgrid-column-end.grid-row-start— the row-axis equivalent of this property.grid-row— shorthand forgrid-row-startandgrid-row-end.grid-area— shorthand that sets row and column start/end at once.grid-template-columns— defines the columns and named lines that this property references.grid-auto-flow— controls how auto-placed items fill the grid, affecting gap behavior.