css - div 行没有正确排列

Question

关于造型的问题。我有一排div元素。除了一个，它们的大小都是相同的，它的高度和宽度是两倍。我想要div的第二排后半部分要对齐的元素较大div但现在确定该怎么做。

.wrapper {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.box {
  height: 50px;
  width: 50px;
  margin: 5px;
  border: 1px solid black;
}

.box-5 {
  height: 100px;
  width: 100px
}

<div class="wrapper">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
  <div class="box box-5">Box 5</div>
  <div class="box box-6">Box 6</div>
  <div class="box box-7">Box 7</div>
  <div class="box box-8">Box 8</div>
  <div class="box box-9">Box 9</div>
  <div class="box box-10">Box 10</div>
  <div class="box box-11">Box 11</div>
  <div class="box box-12">Box 12</div>
  <div class="box box-13">Box 13</div>
  <div class="box box-14">Box 14</div>
  <div class="box box-15">Box 15</div>
  <div class="box box-16">Box 16</div>
  <div class="box box-17">Box 17</div>
  <div class="box box-18">Box 18</div>
  <div class="box box-19">Box 19</div>
</div>

我希望框 13 - 16 位于框 5 下半部分的左侧，框 17 - 19 位于右侧。

Answer 1

你可以使用 CSS display: grid及其伴侣 grid-template-columns来解决这个问题。感谢 Maaz Syed Adeeb 的评论更新了答案。

grid-template-columns: repeat(13, auto);

(应该是 十三个 而不是 12 个盒子)。

只有第 5 号盒子在样式上进行了升级以扩展其盒子:

grid-column: span 2;
grid-row: span 2;

在 MDN 阅读有关网格的更多信息.

更新的片段:

.wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(13, auto);
  grid-template-rows: auto;
  grid-gap: 0;
}

.box {
  height: 50px;
  width: 50px;
  margin: 5px;
  border: 1px solid black;
}

.box-5 {
  height: 100px;
  width: 100px;
  grid-column: span 2;
  grid-row: span 2;
}

<div class="wrapper">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
  <div class="box box-5">Box 5</div>
  <div class="box box-6">Box 6</div>
  <div class="box box-7">Box 7</div>
  <div class="box box-8">Box 8</div>
  <div class="box box-9">Box 9</div>
  <div class="box box-10">Box 10</div>
  <div class="box box-11">Box 11</div>
  <div class="box box-12">Box 12</div>
  <div class="box box-13">Box 13</div>
  <div class="box box-14">Box 14</div>
  <div class="box box-15">Box 15</div>
  <div class="box box-16">Box 16</div>
  <div class="box box-17">Box 17</div>
  <div class="box box-18">Box 18</div>
  <div class="box box-19">Box 19</div>
</div>