grid-column-end: -1; weird behavior - html

Question

What I intend to achieve is something that looks as follows:
Where the header spans the full width of the container, where there can be 3 or 4 columns having the same width in the second row, and where the footer has the same width as the first column.
I thought I could achieve this with the following HTML and CSS code, but no. grid-column-end is giving me headaches. If I set it to 5, it looks as I want in the case that there are four items in the second row, but not if there are only 3, in which case grid-column-end should be 4. Hence, the solution of using -1, which refers to the last grid-line, but then a grid containing something like 40 columns is created.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
grid-template-rows: auto minmax(0, 1fr) auto;
grid-gap: 10px;
width: 100%;
}
.header {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 1;
background-color: #bbb;
padding: 20px;
}
.item {
background-color: #ddd;
border: 1px solid #aaa;
padding: 20px;
grid-row: 2;
}
.footer {
grid-column: 1 / 2;
grid-row: 3;
background-color: #bbb;
padding: 20px;
}
<div class="container">
<div class="header">Header</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="footer">Footer</div>
</div>