grid-template-columns is not applied with a list of items

I am trying to implement a list component with the grid layout, which got some sub components for filtering, etc. The problem is, the items get pushed into a third column, even though I only declared two in the grid-template-columns rule.

.container {
  display: grid;
  margin: 50px;
  width: calc(100% - 100px);
  place-items: stretch;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-template-areas: 
   "dropdown dropdown" 
   "filter   ." 
   "filter   ." 
   "breaker  breaker";
}

.dropdown {
  grid-area: dropdown;
  background-color: red;
}

.filter {
  grid-area: filter;
  background-color: green;
}

.breaker {
  grid-area: breaker;
  background-color: blue;
}

.item {
  background-color: orange;
}

.pagination {
  grid-column: 1 / end;
  background-color: yellow;
}

<div class="container">
  <div class="dropdown">Dropdown </div>
  <div class="filter">Filter </div>
  <div class="breaker">Breaker </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="pagination">Pagination </div>
</div>

JSFiddle: https://jsfiddle.net/c0y1bmza/7/

Solution

You are using grid-column: 1 / end; and you didn't define any area called end so you are creating a new column in the implicit grid to have 3 columns (2 explicitely defined and 1 implicit)

Use -1 instead:

If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. ^ref

.container {
  display: grid;
  margin: 50px;
  width: calc(100% - 100px);
  place-items: stretch;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-template-areas: 
   "dropdown dropdown" 
   "filter   ." 
   "filter   ." 
   "breaker  breaker";
}

.dropdown {
  grid-area: dropdown;
  background-color: red;
}

.filter {
  grid-area: filter;
  background-color: green;
}

.breaker {
  grid-area: breaker;
  background-color: blue;
}

.item {
  background-color: orange;
}

.pagination {
  grid-column: 1 / -1;
  background-color: yellow;
}

<div class="container">
  <div class="dropdown">Dropdown </div>
  <div class="filter">Filter </div>
  <div class="breaker">Breaker </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="pagination">Pagination </div>
</div>

Or breaker-end (or drowpdown-end) for this case:

.container {
  display: grid;
  margin: 50px;
  width: calc(100% - 100px);
  place-items: stretch;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-template-areas: 
   "dropdown dropdown" 
   "filter   ." 
   "filter   ." 
   "breaker  breaker";
}

.dropdown {
  grid-area: dropdown;
  background-color: red;
}

.filter {
  grid-area: filter;
  background-color: green;
}

.breaker {
  grid-area: breaker;
  background-color: blue;
}

.item {
  background-color: orange;
}

.pagination {
  grid-column: 1 / breaker-end;
  background-color: yellow;
}

<div class="container">
  <div class="dropdown">Dropdown </div>
  <div class="filter">Filter </div>
  <div class="breaker">Breaker </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="item">Item </div>
  <div class="pagination">Pagination </div>
</div>

The grid-template-areas property creates implicit named lines from the named grid areas in the template. For each named grid area foo, four implicit named lines are created: two named foo-start, naming the row-start and column-start lines of the named grid area, and two named foo-end, naming the row-end and column-end lines of the named grid area. ^ref