When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreciate any guidance on this matter.
*{
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>