为什么不将flex-wrap应用于CSS网格布局？

Question

我有一个CSS网格布局，我将其用于图像，但是，我希望它能够响应。我希望内容包装到下一行。我基本上希望图像变小，如果不合适，请转到下一行。

.portfolio-mini{
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-rows: 200px 200px 200px;
    display: grid;
    grid-gap: 10px;
    width: 830px;
    margin: 15px auto;
}
.portfolio-mini div{
    background-color: #333;
    border-radius: 4px;
}
#a{
    grid-area: 1 / 1 / span 1 / span 2;
}
#b{

}
#c{
    grid-area: 1 / 4 / span 2 / span 1;
}
#d{
    grid-area: 2 / 1 / span 2 / span 1;
}
#e{

}
#f{

}
#g{
    grid-area: 3 / 2 / span 1 / span 2;
}


@media screen and (max-width: 1200px){
    main{
        width: 95%;
    }
    .portfolio-mini{
        flex-wrap: wrap;
    }
}

<div class="portfolio-mini">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
    <div id="d">D</div>
    <div id="e">E</div>
    <div id="f">F</div>
    <div id="g">G</div>
    <div id="h">H</div>
</div>