html - 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>

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