Element not spanning explicit and implicit columns

Question

In a grid container with 1 column and 1 row, If I have an implicit column on the 1st row, how do I get an element in the second row (the green column in the example) to span both the explicit and implicit columns? Thanks in advance

*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr;
  grid-auto-columns: auto;
}

button {
  background-color: red;
  grid-row-start: 1;
  grid-column-start: 2;
  grid-column-end: 3;
}

header {
  background-color: blue;
  grid-row-start: 1;
}
p {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: -1;
  width: 100%;
}

<div class="grid">
  <header>title</header>
  <button>button</button>
  <p>paragraph</p>
</div>

Answer 1

*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr;
  grid-auto-columns: auto;
}

button {
  background-color: red;
  grid-row-start: 1;
  grid-column-start: 2;
  grid-column-end: 3;
}

header {
  background-color: blue;
  grid-row-start: 1;
}
p {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: 3; /*This is what changed*/
}

<div class="grid">
  <header>title</header>
  <button>button</button>
  <p>paragraph</p>
</div>