flexbox 12 column grid 2

<!doctype html>
<title>Example</title>
<style>
.wrapper {
  display: flex;
}
.wrapper > div {
  font-size: 4vh;
  color: white;
  background: darkslategray;
  margin: .1em;
  padding: .3em;
  border-radius: 3px;
  flex: 1;
}
.wrapper:nth-child(2) > div:nth-child(1),
.wrapper:nth-child(12) > div:nth-child(2) {
  flex: 1;
  }
.wrapper:nth-child(2) > div:nth-child(2),
.wrapper:nth-child(12) > div:nth-child(1) {
  flex: 11;
  }
.wrapper:nth-child(3) > div:nth-child(1),
.wrapper:nth-child(11) > div:nth-child(2) {
  flex: 2;
  }
.wrapper:nth-child(3) > div:nth-child(2),
.wrapper:nth-child(11) > div:nth-child(1) {
  flex: 10;
  }
.wrapper:nth-child(4) > div:nth-child(1),
.wrapper:nth-child(10) > div:nth-child(2) {
  flex: 3;
  }
.wrapper:nth-child(4) > div:nth-child(2),
.wrapper:nth-child(10) > div:nth-child(1) {
  flex: 9;
  }
.wrapper:nth-child(5) > div:nth-child(1),
.wrapper:nth-child(9) > div:nth-child(2) {
  flex: 4;
  }
.wrapper:nth-child(5) > div:nth-child(2),
.wrapper:nth-child(9) > div:nth-child(1) {
  flex: 8;
  }
.wrapper:nth-child(6) > div:nth-child(1),
.wrapper:nth-child(8) > div:nth-child(2) {
  flex: 5;
  }
.wrapper:nth-child(6) > div:nth-child(2),
.wrapper:nth-child(8) > div:nth-child(1) {
  flex: 7;
  }
.wrapper:nth-child(7) > div:nth-child(1) {
  flex: 6;
  }
.wrapper:nth-child(7) > div:nth-child(2) {
  flex: 6;
  }
</style>
<div class="wrapper">
  <div>1</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
</div>