怎么把一个div贴到右上角？

Question

有个example.

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.content {
  height: 100px;
  width: 100px;
  border: 1px solid;
}

.sticked {
  height: 200px;
  background: red;
}

<div class="wrapper">
  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
  <div class="content">Content 4</div>
  <div class="content">Content 5</div>
  <div class="content">Content 6</div>
  <div class="content">Content 7</div>
  <div class="content">Content 8</div>
  <div class="content">Content 9</div>
  <div class="content">Content 10</div>
  <div class="content">Content 11</div>
  <div class="content">Content 12</div>
  <div class="content">Content 13</div>
  <div class="content">Content 14</div>
  <div class="content">Content 15</div>

  <div class="content sticked">Div in Upper Right Corner</div>
</div>

我需要 "sticked" 元素始终放置在右上角元素的位置（下图中的 "Content 6" 和 "Content 12"）

或者下图"Content 3"和"Content 6"处​​

如何将 flex div 之一粘贴到右上角？

Answer 1

这可以通过 CSS 网格来完成：

.wrapper {
  display: grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  grid-auto-rows:100px;
}

.content {
  border: 1px solid;
}

.sticked {
  grid-column:-2; /* last column */
  grid-row:1/span 2;
  background: red;
}

<div class="wrapper">
  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
  <div class="content">Content 4</div>
  <div class="content">Content 5</div>
  <div class="content">Content 6</div>
  <div class="content">Content 7</div>
  <div class="content">Content 8</div>
  <div class="content">Content 9</div>
  <div class="content">Content 10</div>
  <div class="content">Content 11</div>
  <div class="content">Content 12</div>
  <div class="content">Content 13</div>
  <div class="content">Content 14</div>
  <div class="content">Content 15</div> 
  <div class="content">Content 16</div>
  <div class="content">Content 17</div>
  <div class="content">Content 18</div>
  <div class="content">Content 19</div> 
  <div class="content">Content 20</div>
  <div class="content">Content 21</div>
  <div class="content">Content 22</div>
  <div class="content">Content 23</div> 

  <div  class="content sticked">Div in Upper Right Corner</div>
</div>