What's the difference between grid-column value 1/1 and 1/2?

Question

In CSS grid, grid-column: 1/1 and 1/2 are showing the same result. Is there any difference between them? Look at the code below.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
}

.item1 {
  grid-column: 1 / 2;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

grid-column value 1 / 2 and 1 / 1 is same. What's the difference?

Answer 1

This is because of a misunderstanding of what grid-column: 1 / 2 means.

It does NOT mean span two columns (the First & Second)...it means that the element starts at grid-line 1 and ends at grid-line 2.

Grid Track @ MDN

A grid track is the space between two grid lines. They are defined in the explicit grid by using the grid-template-columns and grid-template-rows properties or the shorthand grid or grid-template properties. Tracks are also created in the implicit grid by positioning a grid Item outside of the tracks created in the explicit grid.

So in your example, because you have 4 columns, there are 5 explicit grid-lines (I'll exclude any grid-lines created by the implict grid to avoid confusion).

Since the first column will always be between lines 1 & 2, it spans only the first column.

• Column 1 : Lines 1 - 2
• Column 2 : Lines 2 - 3
• Column 3 : Lines 3 - 4
• Column 4 : Lines 4 - 5

grid-column: 1/1 is essentially invalid so it resets to it's default which is to span only the first column.

A Complete Guide to Grid

Answer 2

The difference is explained in the Grid spec:

8.3.1. Grid Placement Conflict Handling

If the start line is equal to the end line, remove the end line.

Okay, so what happens when the end line is removed?

It computes to auto.

8.4. Placement Shorthands: the grid-column, grid-row, and grid-area properties

If two <grid-line> values are specified, the grid-row-start / grid-column-start longhand is set to the value before the slash, and the grid-row-end / grid-column-end longhand is set to the value after the slash.

When the second value is omitted, if the first value is a <custom-ident>, the grid-row-end / grid-column-end longhand is also set to that <custom-ident>; otherwise, it is set to auto.

The value auto means span 1.

A <custom-ident> is an author-defined identifier and, in Grid, refers to named grid areas, like this:

#grid {
 display: grid;
 grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
 grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
}

Since there are no named grid areas in your code, the grid-column end line resolves to auto.

Therefore, the following rules are all the same:

• grid-column: 1 / 2
• grid-column: 1 / 1
• grid-column: 1 / auto
• grid-column: 1