У меня есть макет сетки 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>