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

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

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

（应该是13 个而不是 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>