Мне нужна сетка, как показано на изображении
Ниже html с 25 блоками.
<div class="container">
<div class="items">
<div class="block-1">block1</div>
<div class="block-2">block2</div>
<div class="block-3">block3</div>
<div class="block-4">block4</div>
<div class="block-5">block5</div>
<div class="block-6">block6</div>
<div class="block-7">block7</div>
<div class="block-8">block8</div>
<div class="block-9">block9</div>
<div class="block-10">block10</div>
<div class="block-11">block11</div>
<div class="block-12">block12</div>
<div class="block-13">block13</div>
<div class="block-14">block14</div>
<div class="block-15">block15</div>
<div class="block-16">block16</div>
<div class="block-17">block17</div>
<div class="block-18">block18</div>
<div class="block-19">block19</div>
<div class="block-20">block20</div>
<div class="block-21">block21</div>
<div class="block-22">block22</div>
<div class="block-23">block23</div>
<div class="block-24">block24</div>
<div class="block-25">block25</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
приведено ниже css для данного кода и в блоке 20 я охватил строку, а на выходе есть дополнительный столбец. несмотря на упоминание
body {
padding: 100px;
}
.container {
border: 4px solid black;
margin-top: auto;
margin-bottom: auto;
width: 700px;
} .items {
margin: 20px;
display: inline-grid;
grid-template-columns: auto auto auto auto auto;
grid-template-rows: auto auto auto auto auto auto;
grid-gap: 2.5rem;
}
.items> div {
border: 2px solid black;
text-align: center;
}
.block-1 {
grid-column: 1 / span 5 ;
grid-row: 1 / span 3;
}
.block-20 {
grid-row: 1 / span 3;
}