我怎么能得到一个3列2行对称布局与5个元素使用CSS网格?

Question

我使用CSS flexbox获得了下面的布局:

* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.my-grid {
list-style-type: none;
padding: 0;
margin: 0 auto;
display: flex;
width: 162px;
flex-wrap: wrap;
}

.my-grid li {
border: 1px solid rgba(0, 0, 0 , 0.125);
background:#c00;
color: #fff;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin: 2px;
} 
.my-grid li:nth-child(4),
.my-grid li:nth-child(5) {
width: 77px;
}

<ul class="my-grid">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

然而，我尝试使用CSS网格获得相同的结果已经失败了。我得到的只是:

* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.my-grid {
width: 160px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(2, 50px);
grid-gap: 5px;
list-style-type: none;
margin: 0 auto;
padding: 0;
}

.my-grid li {
border: 1px solid rgba(0, 0, 0 , 0.125);
background:#c00;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}

<ul class="my-grid">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

我希望能够实现的结果，你可以看到在第一个片段，通过使用CSS网格，尽可能少的行。(我发现CSS网格通常非常灵活和优雅)。

这可能吗?我错过了什么?

Answer 1

告诉孩子们在6列网格中跨2列默认情况下，更宽的可以跨越3列。

* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.my-grid {
width: 160px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 50px);
grid-gap: 5px;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
.my-grid li {
border: 1px solid rgba(0, 0, 0, 0.125);
background: #c00;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
grid-column: span 2;
}
.my-grid li:nth-last-child(2),
.my-grid li:nth-last-child(1) {
grid-column: span 3
}

<ul class="my-grid">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

Answer 2

一种方式(行数多于flex):

* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.my-grid {
width: 160px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 50px);
grid-gap: 5px;
list-style-type: none;
margin: 0 auto;
padding: 0;
}

.my-grid li {
border: 1px solid rgba(0, 0, 0 , 0.125);
background:#c00;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.my-grid li:first-child {
grid-column: 1/3;
}
.my-grid li:nth-child(2) {
grid-column: 3/5;
}
.my-grid li:nth-child(3) {
grid-column: 5/7;
}
.my-grid li:nth-child(4) {
grid-row: 2;
grid-column: 1/4;
}
.my-grid li:last-child {
grid-row: 2;
grid-column: 4/7;
}

<ul class="my-grid">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>