当试图跨越块20时，它添加了另一个额外的列，但是我想要如图像所示的网格。

Question

我要如图中所示的网格

下面是有25个区块的html。

<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>

在下面的os中，给定代码的css，在第20块中，我跨越了行，并且输出有一个额外的列。尽管有提及

体{

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;

}

.座-1{

grid-column: 1 / span 5 ;
grid-row: 1 / span 3;

}

.座-20{

grid-row: 1 / span   3;

}

Answer 1

.block-20类需要指定grid-row rule: span 2

​

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: span 2;
}

<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>
<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>

​