元素不跨越显式列和隐式列

Question

在一个有1列和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: -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>

Answer 2

由于隐式列是auto列，因此可以像下面的一样显式并简化代码

* {
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 2fr;
color: white;
}
button {
background-color: red;
}
header {
background-color: blue;
}
p {
background-color: green;
grid-column: 1/-1;
}

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

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