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

:root {
  --gap: 3px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  display: grid;
  place-content: center;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  grid-auto-flow: dense;
  width: clamp(280px, 50vmin, 500px);
}
.grid > * {
  border: 1px solid;
  display: grid;
  place-content: center;
  aspect-ratio: 1;
}

.grid :nth-child(10n + 1),
.grid :nth-child(10n + 10) {
  grid-row: span 2;
  aspect-ratio: 1 / calc(2 + var(--gap));
}
.grid :nth-child(10n + 1) {
  grid-column: 1;
}
.grid :nth-child(10n + 9) {
  grid-column: 3;
}
.grid :nth-child(10n + 10) {
  grid-column: 4;
}

.grid :nth-child(10n + 2),
.grid :nth-child(10n + 5),
.grid :nth-child(10n + 7),
.grid :nth-child(10n + 8) {
  grid-column: span 2;
  aspect-ratio: calc(2 + var(--gap)) / 1;
}